charlotteshih
commented
4 years ago Accessibility Best Practices
These are the guidelines that websites must follow to be ADA-compliant. Essentially, any visual or audio element must be accompanied by descriptive text. Furthermore (I'll get more into this in the next section), HTML must be semantic -- that is, the HTML tags used on a page must be descriptive of the function of the content around which the tag is wrapped.
- Every image, video file, audio file, plug-in, etc. has an alt tag
- Complex graphics are accompanied by detailed text descriptions
- The alt descriptions describe the purpose of the objects
- If an image is also used as a link, make sure the alt tag describes the graphic and the link destination
- Decorative graphics with no other function have empty alt descriptions (
alt= "") - Add captions to videos
- Add audio descriptions
- Create text transcript
- Create a link to the video rather than embedding it into web pages
- Add a link to the media player download
- Add an additional link to the text transcript
- The page should provide alternative links to the Image Map
- The
<area>tags must contain an alt attribute - Data tables have the column and row headers appropriately identified (using the
<th>tag) - Tables used strictly for layout purposes do NOT have header rows or columns
- Table cells are associated with the appropriate headers (e.g. with the id, headers, scope and/or axis HTML attributes)
- Make sure the page does not contain repeatedly flashing images
- Check to make sure the page does not contain a strobe effect
- A link is provided to a disability-accessible page where the plug-in can be downloaded
- All Java applets, scripts and plug-ins (including Acrobat PDF files and PowerPoint files, etc.) and the content within them are accessible to assistive technologies, or else an alternative means of accessing equivalent content is provided
- When form controls are text input fields use the
<label>element - When text is not available use the title attribute
- Include any special instructions within field labels
- Make sure that form fields are in a logical tab order
- Include a ‘Skip Navigation' button to help those using text readers
Accessible HTML/CSS/JavaScript
I found these three articles that go into great detail about writing accessible code:
- Writing HTML with accessibility in mind
- Writing JavaScript with accessibility in mind
- Writing CSS with accessibility in mind
They're all great reads (about 10 minutes each) and I definitely recommend setting aside some time to look through them. What it really boils down to is using descriptive tags like <header>, <footer>, <nav>, <main>, <section>, <article>, etc. wherever possible, as these semantic tags are picked up by screen readers. And styling the website in a way that fonts are at a legible size, and colors are properly contrasted.
Here's a page with many examples of semantic forms.
Testing Accessibility
The A11Y Project: Checklist to ensure that your website is fully accessible
Toptal Color Blind Filter: input your URL and it displays how your website appears to viewers with various forms of color blindness
Lighthouse: Chrome extension that generates a report on a webpage's performance, accessibility, best practices, and SEO
Screen readers: macOS pre-installed with VoiceOver, MDN recommends NV Access for testing in Windows and Orca for testing in Linux.
Manual testing with keyboard-only navigation is another great way to ensure that the site is fully navigable for users unable to use a mouse.
ddfridley
Government agencies require Americans with Disabilities Act compliance. What need research into what do we need to do to comply, and how do we test it after we have implemented it. Also, is there a way to engage with those who have disabilities in order to directly collect their needs and address them, and then engage them for actual user testing.
The output of this task should be a document that references HTML and/or React requirements for ADA compliance, tools for testing, resources for help/assistance.