To make the website more accessible, I follow WCAG 2.1 guidelines and use an accessibility checklist (A11Y). I also use tools like Axe and WAVE browser extensions, Lighthouse in Chrome DevTools, and Accessibility Insights Windows App. I test with screen readers like NVDA and JAWS, and use keyboard-only navigation.
This mission is happening now. The most recent update was on February 28, 2024.
Content
I usually align text to the left for languages that read from left to right (LTR) because centered or justified text can be hard to read. In longer pieces of writing, I only center the title, and everything else is left-aligned.
Every link should have text that clearly describes what will happen when the user clicks on it. This helps users who rely on screen readers or other assistive technologies. If there is no descriptive text, I use the 'aria-label' attribute like this: aria-label='', and if the link is not for user interaction, I'm adding aria-hidden='true'. Also, I add "(opens in a new tab)" to external links and to links that open in a new tab.
Global Code
I use the W3C validator to ensure that the HTML on the website is valid. This helps provide a consistent and expected experience for users on all browsers and assistive technologies. Valid HTML is important because it ensures that the website works correctly and is accessible to everyone, including those who rely on assistive technology to navigate the web.
In addition to other practices, I include a 'lang' attribute in the HTML element to specify the language of the content. This helps screen readers and other assistive technologies understand the language used on the website. I also enable viewport zoom, which allows users to zoom in and out of the webpage for better readability. Additionally, I use landmark elements like 'nav', 'main', and 'footer' to indicate important content areas on the page. These landmarks help users navigate the website more easily, especially those using screen readers.
Keyboard
I made sure that every block can be focused by adding :focus and a box shadow. I also added a tabindex of zero for paragraphs, images, and other elements that aren't naturally focused. You can move around the website using your keyboard by pressing the Tab and Enter keys. You can also use Shift+Tab to go back to the previous item.
For active pop-ups like menus and search bars, I added an 'aria-modal' attribute set to 'true' and a 'role' attribute set to 'dialog'. This helps screen reader users know how to navigate within them.
I added hidden links with class .skip-link on the pages. When users click on these links using keyboard navigation or a screen reader, they can skip directly to main parts of the page like the main content, main menu, page menu, or footer.
Images
Dealing with images is pretty straightforward - I just need to make sure every image has an alt attribute. I believe it's best not to include text directly on images in Photoshop. However, if I do add text, I'll make sure to include that text in the alt description as well. This helps ensure that the content is accessible to everyone, including those who may not be able to see the images.
Headings
I make sure each page has only one main heading (h1) and that the rest of the headings (h2, h3, etc.) are organized logically and predictably, matching their semantic meaning.
Lists
I use list elements like ol, ul, and dl for organizing content into lists. These elements help users understand that the items are related and may indicate if they're in a specific order. Lists also show how many items are in the group. Lists can be used for sections of related content, items displayed in a grid, or links that are next to each other.
Controls
I use the a element for links, ensuring they are recognizable and clearly indicate clickable content. For buttons, I use the button element. To enhance accessibility, I provide a visible focus state for controls, making it easier for users to know which element is currently selected.
I also include a skip link (see "Keyboard", hidden links with class .skip-link) that appears when focused, enabling users to jump directly to the main content, improving navigation efficiency. Also, I identify links that open in a new tab or window (in aria-label), helping users understand how the link will behave. But this is mostly for external links.
Tables
I don't currently use any data on this website that needs to be presented in a table format. However, if I did, I would use the table element and include th elements for headers. I would also use the scope attribute to specify the scope of the headers. Also, I would include a caption element to provide a title for the table.
Forms
This website includes forms, such as a contact form and a search form. Each input field in the form is linked to a label, making it clear what each field is for. I also use the fieldset and legend elements when grouping related fields together. After submitting a form, any errors are shown in a list above the form, helping users easily identify and correct any mistakes.
Media
I ensure that videos do not start playing automatically (autoplay). I also make sure that the media controls (in case if I use slideshows), like play, pause, and volume, are accessible and use the correct markup for better usability.
Video
This website includes YouTube embedded videos. I always ensure that videos on the website have captions that are visible, can be activated, and can be turned on. This helps people who cannot hear the audio to understand the video's content. Also, I check for any content that could potentially trigger seizures and remove it from the website to make it safer for all users.
Audio
I don't currently use any audio files or podcasts on the website. H However, if I decide to include them in the future, I will make sure to provide transcripts. This way, users who cannot hear the audio can still access the content.
Appearance
I regularly check my website using specialized browsing modes like Windows High Contrast or Inverted Colors. I also increase the text size to 200% to simulate browsing from a mobile device. During these checks, I ensure that there is good spacing between content and that the layout remains clear and consistent. I make sure that information is not conveyed solely through color and that instructions are not only visual or audio-based. Overall, I aim to maintain a simple, straightforward, and consistent layout to ensure that all users can easily access and understand the content on my website.
Animation
I aim to use animations sparingly on my website to avoid being distracting. However, if I do use animations, I ensure that they are smooth and not overly flashy. This helps maintain a pleasant user experience without causing unnecessary distractions.
Color contrast
Any text (or image that contains text) must have a color contrast ratio of 4.5:1 or higher for small to normal-sized text to be readable by users with low vision and to meet WCAG AA level guidelines. For larger text, the contrast ratio must be 3:1 or higher. To meet WCAG AAA level guidelines, the contrast ratio must be 7:1.
I strive to meet the highest level of accessibility standards, which is the WCAG AAA level. To achieve this, I ensure that the color contrast ratio between the foreground and background colors is at least 7:1. I use UserWay's Contrast Checker to verify and adjust the colors if needed, making sure that the content is easily readable for all users.
Mobile and touch
I make sure that my website can be viewed in any orientation, whether it's portrait or landscape. I ensure that there is no need for horizontal scrolling, and if I find any issues, I fix them right away. I also test to ensure that buttons and links with icons are easy to activate. Also, I provide enough space between interactive items to allow for scrolling without accidentally activating items. This helps improve the overall user experience on the website.
I believe that the website meet the AAA level of the WCAG 2.2 to the best of my knowledge. If you notice any issues, please let me know by using the contact form.