So when you design and develop a website, you should consider web accessibility.<\/p>\n\n\n\n
Why Should You Care About Web Accessibility<\/h2>\n\n\n\n
Web accessibility improves the user experience for everyone by making your website and its content more user-friendly and understandable.<\/p>\n\n\n\n
And making your site accessible has many benefits. Here are just a few:<\/p>\n\n\n\n
- \n
- Increased Reach:<\/strong> Making your website accessible will help you reach more people, including those with disabilities. This can help improve your customer base and grow your reach.<\/li>\n\n\n\n
- Promoting Inclusivity & Diversity:<\/strong> By creating accessible websites, you are not only complying with legal requirements, but you are also promoting inclusivity and diversity.<\/li>\n\n\n\n
- Improved User Experience:<\/strong> Web accessibility can enhance the user experience through improved navigation, keyboard accessibility, and clear, concise content.<\/li>\n\n\n\n
- Increased SEO Rankings:<\/strong> Your website will rank higher in search engine results because search engines like Google take web accessibility into account when ranking sites.<\/li>\n\n\n\n
- Enhance Brand Reputation:<\/strong> An accessible website builds trust and credibility with customers by demonstrating a commitment to inclusivity and accessibility.<\/li>\n<\/ol>\n\n\n\n
Web accessibility should be a priority when you design or develop your website.<\/p>\n\n\n\n
Core of Web Accessibility Standards<\/h2>\n\n\n\n
The World Wide Web Consortium (W3C) has established the Web Content Accessibility Guidelines (WCAG) as the international standard for web accessibility.<\/p>\n\n\n\n
The most recent version, WCAG 2.1, provides a comprehensive set of guidelines for ensuring that web content is perceivable, operable, understandable, and robust.<\/p>\n\n\n\n
01. Perceivable \u2013 Perception through Senses<\/h3>\n\n\n\n
Present information and user interface components so users can perceive through visual, auditory, or touch-based means.<\/p>\n\n\n\n
This includes providing alternatives for visual content, such as text descriptions for images<\/strong>.<\/p>\n\n\n\n
Ensure that colour contrasts are easy to distinguish<\/strong>.<\/p>\n\n\n\n
02. Operable \u2013 Designing for Input Method Operation<\/h3>\n\n\n\n
Make the user interface components and navigation operable through a keyboard or alternative means without relying on a mouse.<\/p>\n\n\n\n
This includes providing keyboard-accessible alternatives for mouse-only interactions,<\/strong> such as drop-down menus.<\/p>\n\n\n\n
Ensure that all functionality can be triggered using a keyboard<\/strong>.<\/p>\n\n\n\n
03. Understandable \u2013 Clear & Consistent Content<\/h3>\n\n\n\n
Make information and user interface easy for everyone to understand<\/strong>, including those with cognitive challenges.<\/p>\n\n\n\n
This includes providing clear and concise content<\/strong>, using straightforward language<\/strong>, and ensuring that the meaning of the content is not obscured by presentation or other factors.<\/p>\n\n\n\n
04. Robust \u2013 Accessible Across Technologies<\/h3>\n\n\n\n
Content must be robust enough to be interpreted by various user agents, including assistive technologies.<\/p>\n\n\n\n
This includes using semantic markup to identify content and structure clearly<\/strong>, and ensuring that the content remains accessible<\/strong> even when new technologies are introduced.<\/p>\n\n\n\n
Three Levels of Web Accessibility (Low to High)<\/h2>\n\n\n\n
WCAG 2.1 also defines three conformance levels (A, AA, and AAA) to assess website accessibility and make improvements.<\/p>\n\n\n\n
Level A \u2013 The Minimum<\/h3>\n\n\n\n
Level A is the minimum level of accessibility. It requires the website to meet basic requirements.<\/p>\n\n\n\n
These requirements address the most common barriers to access for people with disabilities.<\/p>\n\n\n\n
Level A includes:<\/strong><\/p>\n\n\n\n
- \n
- Text alternatives for images & videos<\/li>\n\n\n\n
- Keyboard accessibility<\/li>\n\n\n\n
- Sufficient contrast<\/li>\n\n\n\n
- Clear & concise content<\/li>\n<\/ul>\n\n\n\n
Level AA \u2013 The Realistic<\/h3>\n\n\n\n
Level AA builds on top of the Level A. It adds additional accessibility features to address a wider range of disabilities. This is typically what most accessible sites are \u2013 they are not perfect, but offer a better experience.<\/p>\n\n\n\n
Level AA includes:<\/strong><\/p>\n\n\n\n
- \n
- Providing captions or transcripts for audio & video content<\/li>\n\n\n\n
- Having accessible forms<\/li>\n\n\n\n
- Using descriptive headings<\/li>\n\n\n\n
- Avoiding the use of time-dependent content<\/li>\n\n\n\n
- Color contrast is at least 4.5:1 in most cases<\/li>\n\n\n\n
- Ensuring that text is resizable up to 200%<\/li>\n<\/ul>\n\n\n\n
Level AAA \u2013 The Perfect<\/h3>\n\n\n\n
Level AAA is the highest level of accessibility. It includes the requirements of Level A and AA, as well as additional features that address even more advanced accessibility needs. This is where we should all aim to make the web a better place for everyone.<\/p>\n\n\n\n
Level AAA includes:<\/strong><\/p>\n\n\n\n
- \n
- Providing audio descriptions for video content<\/li>\n\n\n\n
- Providing sign language interpretations for audio content<\/li>\n\n\n\n
- Having a high level of contrast in all visual elements<\/li>\n\n\n\n
- Ensuring that colour contrast ratios are at least 7:1<\/li>\n<\/ul>\n\n\n\n
Note:<\/strong> While Level AAA conformance provides the highest level of accessibility, it’s not necessarily required for all websites. The appropriate level of conformance will depend on the specific needs of your website and users.<\/p>\n\n\n\n
How to Make Your Website Accessible<\/h2>\n\n\n\n
Making your website accessible can seem overwhelming, but it doesn\u2019t have to be.<\/p>\n\n\n\n
Here are 25 tips to help make your website accessible for everyone.<\/p>\n\n\n\n
- \n
- Use clear and descriptive text.<\/strong> Simplify your language by choosing words that are easy to read and understand, and keep sentences short and to the point.<\/li>\n\n\n\n
- Use appropriate headings.<\/strong> Utilize headings and subheadings to create an outline for your page. This assists non-visual users, and search engines understand how your page is organized.<\/li>\n\n\n\n
- Identify text language.<\/strong> To aid multi-lingual screen readers, use markup to identify the document’s default language and any text that differs from it.<\/li>\n\n\n\n
- Use text rather than pictures of text.<\/strong> Control its appearance with CSS for better clarity and faster loading times.<\/li>\n\n\n\n
- Don’t use small font sizes.<\/strong> Opt for a reasonably large font size as the default setting. Use a font size of 16px (=1em), which follows the default browser font size, to accommodate user preferences and expectations.<\/li>\n\n\n\n
- Include proper alt text to images & videos.<\/strong> Alt text provides a text alternative for non-text content, which makes it easier for people with visual impairments to access the content.<\/li>\n\n\n\n
- Ensure your navigation menu is accessible to all users.<\/strong> Consider if users can operate the menu through a keyboard and if its efficiency requires minimal keystrokes.<\/li>\n\n\n\n
- Simplify visual & audio content.<\/strong> Ensure strong colour contrast for all text, and allow users to adjust or turn off background audio for improved accessibility.<\/li>\n\n\n\n
- Ensure the text and background colours have sufficient contrast.<\/strong> This will make reading the text easier for people with low vision.<\/li>\n\n\n\n
- White space is a key.<\/strong> Leave enough space between lines and blocks of text to make it easier for users to track horizontally and improve readability.<\/li>\n\n\n\n
- Associate form fields with labels.<\/strong> Use the HTML label element to inform screen reader users of the connections between form fields and their corresponding labels or prompts.<\/li>\n\n\n\n
- Use ARIA attributes to supplement HTML.<\/strong> ARIA (Accessible Rich Internet Applications) attributes provide additional information about the page’s content, making it easier for people with disabilities to access.<\/li>\n\n\n\n
- Offer transcriptions or captions for audio & video.<\/strong> Provide transcriptions for audio and video to aid those with low internet speed or who are deaf-blind in accessing the content.<\/li>\n\n\n\n
- Add an audio description to videos.<\/strong> For individuals who cannot view the visuals, create a script that summarizes key elements and offer it as a separate audio track or timed text.<\/li>\n\n\n\n
- Avoid using content that flashes or flickers.<\/strong> Some content with flickering, flashing, blinking, or rapidly changing colours more than three times in a second can trigger seizures in susceptible people. Or at least provide a warning beforehand.<\/li>\n\n\n\n
- Give ample time for interaction on your website.<\/strong> Provide enough time for users to read, view, and interact with the various types of content on your site. If any activity on your site has a time limit, users should be able to extend or cancel it.<\/li>\n\n\n\n
- Create clear error messages.<\/strong> Offer a clear explanation of the issue and steps to fix it to make the experience less frustrating for users.<\/li>\n\n\n\n
- Use proper HTML formatting.<\/strong> Assistive technologies use the HTML code of a webpage to convert its content. Ensure your HTML code is properly formatted with start and end tags and avoid duplicate IDs or attributes within a single HTML tag.<\/li>\n\n\n\n
- Make sure all content is accessible via multiple devices.<\/strong> This will ensure that users can access the content regardless of their device.<\/li>\n\n\n\n
- Highlight user focus in a noticeable way.<\/strong> Use :hover in CSS to bring the page to life and react to mouse movements. For those who don’t use a mouse, ensure the same functionality is provided using :focus.<\/li>\n\n\n\n
- Select accessible JavaScript widgets.<\/strong> Be thorough in your research when opting for a pre-made widget instead of building one. Look into the documentation and reports for accessibility information. Verify the widget’s accessibility through keyboard testing or assistive technology and have disabled users test it.<\/li>\n\n\n\n
- Test your website using only a keyboard.<\/strong> Navigate your web page and access all its functions using the tab key without using a mouse. This simple test is often a good measure of accessibility.<\/li>\n\n\n\n
- Check content visibility with high-contrast colour schemes.<\/strong> Most operating systems and some web browsers offer high-contrast colour schemes. Ensure that all crucial page elements are visible when these schemes are turned on.<\/li>\n\n\n\n
- Test pages with assistive technologies (AT).<\/strong> Utilize free screen readers and other AT for testing to gain insight into potential accessibility problems with features on a web page.<\/li>\n\n\n\n
- Always test.<\/strong> Regularly test and monitor your website to ensure it remains accessible to all users, including those with disabilities.<\/li>\n<\/ol>\n\n\n\n
Web Accessibility Tools<\/h2>\n\n\n\n
There are lot of tools to help us develop and design accessible websites \u2013 from basic to advanced; for accessibility testing, evaluation, and remediation.<\/p>\n\n\n\n
![\"WAVE](\"https:\/\/gazizoff.com\/wp-content\/uploads\/2023\/02\/WAVE-Web-Accessibility-techology-1024x576.jpg\")
<\/a><\/figure>\n\n\n\nWAVE \u2013 Accessibility Evaluation Tool<\/a><\/h3>\n\n\n\n
A Web Accessibility Evaluation Tool helps identify accessibility errors and provides suggestions for improvement.<\/p>\n\n\n\n
WAVE visually showcases the inaccessible parts of your website by analyzing the URL you provide.<\/p>\n\n\n\n
It pinpoints the sections that do not follow WCAG standards. And it offers a thorough examination and assessment of the website’s content.<\/p>\n\n\n\n
![\"WebAIM](\"https:\/\/gazizoff.com\/wp-content\/uploads\/2023\/02\/WebAIM-technology-1024x576.jpg\")
<\/a><\/figure>\n\n\n\nWebAIM \u2013 Accessibility Resources<\/a><\/h3>\n\n\n\n
WebAIM (Web Accessibility In Mind) is a comprehensive web accessibility resource.<\/p>\n\n\n\n
It provides various resources and services to help individuals, organizations, and developers create accessible websites and applications.<\/p>\n\n\n\n
WebAIM offers training and education on accessibility, research, and analysis of best practices, tools, and services for accessibility testing and evaluation.<\/p>\n\n\n\n
![\"aXe](\"https:\/\/gazizoff.com\/wp-content\/uploads\/2023\/02\/aXe-technology-1024x576.jpg\")
<\/a><\/figure>\n\n\n\naXe \u2013 Accessibility Testing Engine<\/a><\/h3>\n\n\n\n
An aXe is an open-source accessibility testing engine. It runs automated tests on websites and provides detailed reports on issues such as missing alt-text, improper use of headings, improper use of ARIA attributes, and inaccessible forms.<\/p>\n\n\n\n
The engine is available as a browser extension for Chrome, Firefox, and Microsoft Edge.<\/p>\n\n\n\n
This tool is designed to be used in the development process and can be integrated with various development environments and testing frameworks.<\/p>\n\n\n\n
![\"HTML_CodeSniffer](\"https:\/\/gazizoff.com\/wp-content\/uploads\/2023\/02\/HTML_CodeSniffer-technology-1024x576.jpg\")
<\/a><\/figure>\n\n\n\nHTML_CodeSniffer \u2013 JavaScript-based Tool<\/a><\/h3>\n\n\n\n
HTML_CodeSniffer is a script you can use to detect potential accessibility issues in HTML code.<\/p>\n\n\n\n
The tool analyzes the HTML source code of a website and flags any areas that do not comply with the accessibility standards.<\/p>\n\n\n\n
It’s a browser-based tool, meaning it runs in the browser, and it is available as a bookmarklet, as a JavaScript include, or as a stand-alone Chrome extension.<\/p>\n\n\n\n
![\"A11Y](\"https:\/\/gazizoff.com\/wp-content\/uploads\/2023\/02\/A11Y-technology-1024x576.jpg\")
<\/a><\/figure>\n\n\n\nA11Y \u2013 Color Contrast Accessibility Validator<\/a><\/h3>\n\n\n\n
A11Y a tool for checking the colour contrast of text on a website to ensure it’s accessible for people with colour blindness or visual impairments.<\/p>\n\n\n\n
It helps to identify areas of the site where text and background colour combinations may not meet the minimum contrast ratio specified by accessibility guidelines.<\/p>\n\n\n\n
The tool allows users to enter the hex codes of the text and background colours and checks the contrast ratio, providing a pass\/fail result and suggestions for improving the contrast if necessary.<\/p>\n\n\n\n
![\"JAWS](\"https:\/\/gazizoff.com\/wp-content\/uploads\/2023\/02\/JAWS-technology-1024x576.jpg\")
<\/a><\/figure>\n\n\n\nJAWS \u2013 Screen Reader Tool<\/a><\/h3>\n\n\n\n
JAWS (Job Access With Speech) is a widely used screen reader for Windows operating systems.<\/p>\n\n\n\n
It reads the text and buttons, describes images, and provides information about the layout and structure of web pages. It’s also making it easier for users to navigate and access the information they need.<\/p>\n\n\n\n
JAWS supports a wide range of applications and software, including web browsers, office applications, and email clients.<\/p>\n\n\n\n
![\"NVDA](\"https:\/\/gazizoff.com\/wp-content\/uploads\/2023\/02\/NVDA-technology-1024x576.jpg\")
<\/a><\/figure>\n\n\n\nNVDA \u2013 Screen Reader Tool<\/a><\/h3>\n\n\n\n
NVDA (NonVisual Desktop Access) provides access to computers for individuals who are blind or have low vision by converting text, images, and other information on a computer screen into audio output.<\/p>\n\n\n\n
NVDA can be used with a standard computer keyboard, a refreshable Braille display, or both.<\/p>\n\n\n\n
The software allows users to read and write emails, browse the web, and access other applications on a computer.<\/p>\n\n\n\n
![\"WAI-ARIA](\"https:\/\/gazizoff.com\/wp-content\/uploads\/2023\/02\/WAI-ARIA-Validator-technology-1024x576.jpg\")
<\/a><\/figure>\n\n\n\nWAI-ARIA Validator \u2013 Accessible Rich Internet Applications<\/a><\/h3>\n\n\n\n
The WAI-ARIA (Web Accessibility Initiative \u2013 Accessible Rich Internet Applications) Validator is a tool used to check the conformance of web content with the WAI-ARIA specifications.<\/p>\n\n\n\n
The tool helps to ensure that dynamic web content and widgets are accessible to people with disabilities, including those who use assistive technologies such as screen readers.<\/p>\n\n\n\n
The validator analyzes the code of a web page. It provides a report of any issues found, such as missing or incorrect ARIA attributes, to help developers correct them and improve the accessibility of their content.<\/p>\n\n\n\n
The WAI-ARIA Validator supports both HTML and XHTML documents.<\/p>\n\n\n\n
Our Favourite Web Accessibility Examples<\/h2>\n\n\n\n
Web accessibility is becoming increasingly important. More and more websites are taking steps to make their websites accessible.<\/p>\n\n\n\n
Here are a few examples of websites that are leading the way in web accessibility:<\/p>\n\n\n\n
Apple<\/h3>\n\n\n\n
Apple’s website is a great example of web accessibility because it meets all requirements set by the World Wide Web Consortium (W3C).<\/p>\n\n\n\n
This means that their website is designed to make it usable for everyone:<\/p>\n\n\n\n
- \n
- Keyboard accessibility<\/strong>, making it possible for users to navigate and interact with the site using only a keyboard.<\/li>\n\n\n\n
- Alternative text for images<\/strong>, ensuring that users who are blind or visually impaired can understand the content on the page.<\/li>\n\n\n\n
- Clear and descriptive headings, links, and labels<\/strong>, which help users understand the page’s structure and navigate it easily.<\/li>\n\n\n\n
- High-contrast colours and large text size<\/strong>, making it easier for users with visual impairments to read the content on the page.<\/li>\n\n\n\n
- Audio descriptions for videos and multimedia content<\/strong>, making the content accessible to users who are deaf or hard of hearing.<\/li>\n<\/ul>\n\n\n\n
Additionally, Apple regularly tests its website to ensure it remains accessible to all users. It also updates it as needed to comply with the latest accessibility guidelines.<\/p>\n\n\n\n
Apple’s commitment to web accessibility ensures that all users have equal access to its website and its content, making the user experience more enjoyable and user-friendly for everyone.<\/p>\n\n\n\n
BBC<\/h3>\n\n\n\n
Another example is BBC, which has taken a number of steps to make its website accessible.<\/p>\n\n\n\n
BBC uses various accessibility features, including:<\/p>\n\n\n\n
- \n
- High-contrast colours<\/strong> ensure that text and images are easy to read for all users, including those with low vision.<\/li>\n\n\n\n
- Alternative text for images & videos<\/strong>, making the site accessible to users with visual impairments.<\/li>\n\n\n\n
- Keyboard navigation<\/strong>, making it fully operable using only a keyboard.<\/li>\n\n\n\n
- Screen reader support<\/strong>, which provides spoken descriptions of the content for users with visual impairments.<\/li>\n\n\n\n
- Semantic markup<\/strong> helps users with disabilities understand the structure of the content and makes it easier for assistive technologies to interpret the page.<\/li>\n\n\n\n
- Accessible forms<\/strong> allow users to submit information and interact with the site, regardless of their abilities or disabilities.<\/li>\n\n\n\n
- Resizable text<\/strong>, making it easier for users to read the content on the page.<\/li>\n<\/ul>\n\n\n\n
GitHub<\/h3>\n\n\n\n
GitHub uses semantic HTML and ARIA attributes to provide additional information to screen readers, making it easier for users with visual impairments to understand the site’s structure.<\/p>\n\n\n\n
The site also allows users to customize the interface to their preference, including increasing the text size, changing the contrast, and toggling the display of animations.<\/p>\n\n\n\n
WordPress.org<\/h3>\n\n\n\n
WordPress.org is a platform that provides tools and resources to help users create accessible websites.<\/p>\n\n\n\n
The site’s core code is built with accessibility in mind, and it includes features such as alternative text for images, semantic headings, and structured content.<\/p>\n\n\n\n
Also, the site provides extensive documentation and support for users looking to make their WordPress-powered sites more accessible.<\/p>\n\n\n\n
Unilever<\/h3>\n\n\n\n
The Unilever website offers accessibility support through accommodations for assistive technologies and coding, such as:<\/p>\n\n\n\n
- \n
- Screen readers<\/li>\n\n\n\n
- Improved user interface (UI)<\/li>\n\n\n\n
- Visual design<\/li>\n\n\n\n
- Text-to-speech or speech-to-speech software<\/li>\n\n\n\n
- Keyboard emulators<\/li>\n\n\n\n
- Screen magnifiers<\/li>\n<\/ul>\n\n\n\n
The website also adheres to or exceeds WCAG standards in colour contrast, layout, navigation, browser compatibility, audio-video content, text alternatives, and more.<\/p>\n\n\n\n
Common Accessibility Issues & How to Fix Them<\/h2>\n\n\n\n
When making your website accessible, you can sometimes make a few common mistakes. So it\u2019s always better to test your website and ensure you don\u2019t have these issues.<\/p>\n\n\n\n
Here are the most 4 common accessibility issues and how to fix them:<\/p>\n\n\n\n
- \n
- Poor Contrast:<\/strong> Poor contrast between text and background colours can make it difficult for people with low vision to read the text.
How To fix:<\/strong> Make sure the text and background colours have sufficient contrast.<\/li>\n\n\n\n- Missing Alt Text:<\/strong> Alt text provides a text alternative for non-text content, which makes it easier for people with visual impairments to access the content.
How to fix:<\/strong> Make sure to add alt text to all images and videos.<\/li>\n\n\n\n- Missing Headings:<\/strong> Headings help guide users through the content, but if they are not used properly, they can make the page difficult to navigate.
How to<\/strong> fix:<\/strong> Make sure to use headings and labels to help guide users through the content.<\/li>\n\n\n\n- Keyboard Navigation:<\/strong> Keyboard navigation allows users to navigate the page using a keyboard, which is helpful for people with motor impairments.
How to fix:<\/strong> Make sure to include keyboard navigation.<\/li>\n<\/ol>\n\n\n\nConclusion<\/h2>\n\n\n\n
Making your website accessible is an essential step. You will ensure that all users can access and use the content on your website, regardless of their abilities or disabilities.<\/p>\n\n\n\n
And with the right tools, resources, and knowledge, you can ensure your site complies with the WCAG 2.1 standards.<\/p>\n\n\n\n
- Missing Alt Text:<\/strong> Alt text provides a text alternative for non-text content, which makes it easier for people with visual impairments to access the content.
- Poor Contrast:<\/strong> Poor contrast between text and background colours can make it difficult for people with low vision to read the text.
- Alternative text for images & videos<\/strong>, making the site accessible to users with visual impairments.<\/li>\n\n\n\n
- Alternative text for images<\/strong>, ensuring that users who are blind or visually impaired can understand the content on the page.<\/li>\n\n\n\n
- Use appropriate headings.<\/strong> Utilize headings and subheadings to create an outline for your page. This assists non-visual users, and search engines understand how your page is organized.<\/li>\n\n\n\n
- Use clear and descriptive text.<\/strong> Simplify your language by choosing words that are easy to read and understand, and keep sentences short and to the point.<\/li>\n\n\n\n
- Promoting Inclusivity & Diversity:<\/strong> By creating accessible websites, you are not only complying with legal requirements, but you are also promoting inclusivity and diversity.<\/li>\n\n\n\n