<\/a>Where to Start<\/h2>\r\nThe Web Content Accessibility Guidelines (WCAG) are the standard for web accessibility. WCAG is organized by the POUR principles<\/a>. Web content should be Perceivable<\/strong>, Operable<\/strong>, Understandable<\/strong>, and Robust<\/strong>.\r\n\r\nPerceivable<\/summary>Can all users (regardless of access means) perceive what is being presented?\r\n\r\nTo ensure content is perceivable, ensure the following best practices are met:\r\n\r\n \t- Images have meaningful alternative text such as coded alt text, figure captions, or adjacent text description<\/li>\r\n \t
- Decorative visual elements are marked with
alt=\"\"<\/code>\r\n\r\n \t- Consider the Alternative Text Quick Start Guide<\/a> for more information<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Videos and audio are\u00a0captioned<\/a>\u00a0or have\u00a0transcripts<\/a>\u00a0or both\r\n
\r\n \t- Learn more with the Closed Captioning Quick Start Guide<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Information\u00a0does not rely on colour alone<\/a>\u00a0to convey meaning or highlight information<\/li>\r\n \t
- There is enough\u00a0contrast between the colour of the text\u00a0<\/a>and the colour of the background\r\n
\r\n \t- Consider Accessible Colour<\/a> for more information about colour<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Fonts are sans-serif and 16px or larger<\/li>\r\n \t
- Webpages have semantic order and meaningful context<\/li>\r\n \t
- Buttons, controls, and form fields<\/a> have descriptive HTML labels<\/a><\/li>\r\n \t
- Ensure no content flashes more than 3 times per second<\/li>\r\n<\/ul>\r\nRemember, HTML is content and CSS is style. Ensure no information or function is dependent on CSS alone. Use tools (discussed below) to view webpages without styling.\r\n\r\n<\/details>
Operable<\/summary>Can all users navigate the page and operate any interactives using their preferred or required input method (mouse, keyboard, touch, voice, etc.)?\r\n\r\nTo ensure content is operable, ensure the following best practices are met:\r\n\r\n \t- The page is logically navigable using only a keyboard\r\n
\r\n \t- Check
tabindex<\/code> and :focus-visible<\/code><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t- The page has\u00a0skip link<\/a>(s) and multiple ways to navigate between pages<\/li>\r\n \t
- Pages have meaningful and unique titles in the
<title><\/code><\/li>\r\n \t- Pages have semantic structure with regions<\/a>,\u00a0headings<\/a>, and\u00a0lists<\/a>.\r\n
\r\n \t- For more information read Structure \u2013 Accessibility Handbook for Teaching and Learning<\/a>.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Media does not autoplay<\/li>\r\n \t
- Users are able to pause animations and carousels<\/li>\r\n \t
- Link text is meaningful and describes the destination\r\n
\r\n \t- Do not use \"click here\" or \"read more\" as link text<\/li>\r\n \t
- Learn more about accessible links<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Buttons accurately describe their action<\/li>\r\n<\/ul>\r\n<\/details>
Understandable<\/summary>Is the content understandable?\r\n\r\nTo ensure content is understandable, ensure the following best practices are met:\r\n\r\n \t- Consistent, predictable navigation<\/li>\r\n \t
- Clear link text and link purpose<\/li>\r\n \t
- Use links and buttons correctly\r\n
\r\n \t- Buttons do something (e.g. open\/close, toggle on\/off, etc.) while links go somewhere (e.g. somewhere else on the page or a different page or site)<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Clear and consistent error messages that receive focus<\/li>\r\n \t
- Abbreviations and acronyms are explained<\/li>\r\n \t
<lang><\/code> attribute matches the language of the content\r\n\r\n \t- Individual parts of pages using additional languages can be marked with\u00a0
<span lang=\"language code\"><\/code><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t- Buttons and form fields are labelled and instructions provided<\/li>\r\n \t
- Complex information is presented in more than one format\r\n
\r\n \t- Provide chart data in table format, a glossary, etc. where appropriate<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Write at a level appropriate to the audience using plain language<\/a>\r\n
\r\n \t- Check spelling, grammar, usage<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<\/details>
Robust<\/summary>Is your web content robust? Can all devices use it?\r\n\r\nTo ensure content is robust, ensure the following best practices are met:\r\n\r\n \t- Content\r\n
\r\n \t- Works across browsers<\/li>\r\n \t
- Works on mobile devices<\/li>\r\n \t
- Is responsive to screen size and zoom level<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- HTML is reviewed and validated<\/li>\r\n \t
- Viewport
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code> supports reflow on user devices<\/li>\r\n<\/ul>\r\n<\/details>For more information consult: How to Meet WCAG (Quick Reference)<\/a>. Consider WCAG in Plain English<\/a> to wade through the jargon and terminology required of a complex set of standards like WCAG.\r\n<\/a>Checklists<\/h2>\r\nBasic Checklist<\/h3>\r\nConsider the interactive Web Accessibility Checklist<\/a> to assess the accessibility of web content. This tool allows you to check off criteria as you work and expand each criteria for more information and links to further guidance.\r\nAdvanced Checklist<\/h3>\r\nThe A11y project provides an interactive checklist<\/a> to check web accessibility.\r\n\r\nFor contextual information, consider the Province of British Columbia's\u00a0guide to creating accessible web products<\/a>.\r\n<\/a>Accessibility and Design<\/h2>\r\nMany web accessibility features are invisible and will not interrupt design choices:\r\n\r\n \t- [pb_glossary id=\"1161\"]Alt text[\/pb_glossary] is hidden in code, read only to screen readers\r\n
\r\n \t- Figure captions are a common practice that provide image descriptions to all users<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Descriptive hyperlinks are more useful for all users\r\n
\r\n \t- Users can verify the URL by hovering on the link and viewing the URL in the bottom-left of the browser window<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- [pb_glossary id=\"1105\"]Heading[\/pb_glossary] tags
<H1> <H2><\/code> etc. are code to provide structure\r\n\r\n \t- Modify CSS to change style<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- [pb_glossary id=\"2026\"]Tables[\/pb_glossary]:
<th> <tr> <td><\/code> are coded within the table and do not change appearance\r\n\r\n \t- Tables can be styled using CSS<\/li>\r\n \t
- Tables are for data, not to create structure. Use columns, flex-grid, or other layout tools for alignment and spacing<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Lists:
<ul> <ol> <li> <dd><\/code> are code to organize lists, but appearance can be modified with CSS<\/li>\r\n \t- Language and viewport attributes are part of your HTML document\r\n
\r\n \t- You can set a different language for part of your page:
<span lang=\u201des\u201d>Hola. Me llamo Pablo<\/span><\/code>. This has no effect on styling<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t- Making your page keyboard accessible changes nothing about appearance<\/li>\r\n \t
- Form labels are expressed in visible text regardless and made accessible with
<label><\/code><\/li>\r\n \t- [pb_glossary id=\"1164\"]Closed captions[\/pb_glossary], [pb_glossary id=\"1884\"]transcripts[\/pb_glossary], and [pb_glossary id=\"1361\"] audio descriptions[\/pb_glossary] are a user choice<\/li>\r\n<\/ul>\r\n
<\/a>Tools and Further Reading<\/h2>\r\nIf working in WordPress, read WordPress Block Editor<\/a> for information on creating accessible posts and pages.\r\n\r\nIf copying content from a Word document, consider using HTML Cleaner<\/a> to remove excess code while retaining your desired look and layout.\r\n\r\nConsider\u00a0Universal Design for the Web<\/a> for further tips and guidance.\r\n\r\nThe following tools are useful for checking existing content for accessibility:\r\n\r\nWAVE by WebAIM<\/a> testing tool extension.\r\n\r\n \t- Flagged errors MAY not necessarily indicate a problem, but rather something that needs to be manually checked<\/li>\r\n \t
- The Reference tab provides information on how to amend errors on your page<\/li>\r\n \t
- WAVE allows you to toggle CSS off to review the page structure in simpler terms and verify that no information is dependent on styling alone<\/li>\r\n \t
- The contrast tab allows you to change page elements colour in a real-time preview<\/li>\r\n \t
- The source viewer incorporates the errors and alerts into a code preview to aid in locating issues<\/li>\r\n \t
- Consult WebAIM: Web Accessibility Evaluation Guide<\/a> for more information about how to use WAVE.<\/span><\/li>\r\n<\/ul>\r\nEdge and Chrome include Lighthouse (Chrome DevTools)<\/a> for testing website accessibility. Review understanding Lighthouse error messages<\/a> for more information.\r\n\r\nUse the Firefox Accessibility Inspector<\/a> to investigate code-based accessibility errors.\r\n\r\nUse the MagentaA11y toolbox<\/a> to understand how to perform manual tests.\r\n\r\n
<\/code><\/div>\r\n<\/div>","rendered":"![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/05\/Accessibility-icon2.png\")
Accessible web content is designed to remove barriers and provide equitable access to information. Users may encounter barriers due to their visual, motor, auditory, or cognitive access means. Web design significantly impacts users\u2019 experience; proper formatting and tool use aids all users to access web content. Properly designed web content is the most accessible and user-friendly format for (almost all types of) information.<\/p>\n
On this page:<\/strong><\/p>\n
Perceivable<\/summary>Can all users (regardless of access means) perceive what is being presented?\r\n\r\nTo ensure content is perceivable, ensure the following best practices are met:\r\n\r\n \t- Images have meaningful alternative text such as coded alt text, figure captions, or adjacent text description<\/li>\r\n \t
- Decorative visual elements are marked with
alt=\"\"<\/code>\r\n\r\n \t- Consider the Alternative Text Quick Start Guide<\/a> for more information<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Videos and audio are\u00a0captioned<\/a>\u00a0or have\u00a0transcripts<\/a>\u00a0or both\r\n
\r\n \t- Learn more with the Closed Captioning Quick Start Guide<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Information\u00a0does not rely on colour alone<\/a>\u00a0to convey meaning or highlight information<\/li>\r\n \t
- There is enough\u00a0contrast between the colour of the text\u00a0<\/a>and the colour of the background\r\n
\r\n \t- Consider Accessible Colour<\/a> for more information about colour<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Fonts are sans-serif and 16px or larger<\/li>\r\n \t
- Webpages have semantic order and meaningful context<\/li>\r\n \t
- Buttons, controls, and form fields<\/a> have descriptive HTML labels<\/a><\/li>\r\n \t
- Ensure no content flashes more than 3 times per second<\/li>\r\n<\/ul>\r\nRemember, HTML is content and CSS is style. Ensure no information or function is dependent on CSS alone. Use tools (discussed below) to view webpages without styling.\r\n\r\n<\/details>
Operable<\/summary>Can all users navigate the page and operate any interactives using their preferred or required input method (mouse, keyboard, touch, voice, etc.)?\r\n\r\nTo ensure content is operable, ensure the following best practices are met:\r\n\r\n \t- The page is logically navigable using only a keyboard\r\n
\r\n \t- Check
tabindex<\/code> and :focus-visible<\/code><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t- The page has\u00a0skip link<\/a>(s) and multiple ways to navigate between pages<\/li>\r\n \t
- Pages have meaningful and unique titles in the
<title><\/code><\/li>\r\n \t- Pages have semantic structure with regions<\/a>,\u00a0headings<\/a>, and\u00a0lists<\/a>.\r\n
\r\n \t- For more information read Structure \u2013 Accessibility Handbook for Teaching and Learning<\/a>.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Media does not autoplay<\/li>\r\n \t
- Users are able to pause animations and carousels<\/li>\r\n \t
- Link text is meaningful and describes the destination\r\n
\r\n \t- Do not use \"click here\" or \"read more\" as link text<\/li>\r\n \t
- Learn more about accessible links<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Buttons accurately describe their action<\/li>\r\n<\/ul>\r\n<\/details>
Understandable<\/summary>Is the content understandable?\r\n\r\nTo ensure content is understandable, ensure the following best practices are met:\r\n\r\n \t- Consistent, predictable navigation<\/li>\r\n \t
- Clear link text and link purpose<\/li>\r\n \t
- Use links and buttons correctly\r\n
\r\n \t- Buttons do something (e.g. open\/close, toggle on\/off, etc.) while links go somewhere (e.g. somewhere else on the page or a different page or site)<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Clear and consistent error messages that receive focus<\/li>\r\n \t
- Abbreviations and acronyms are explained<\/li>\r\n \t
<lang><\/code> attribute matches the language of the content\r\n\r\n \t- Individual parts of pages using additional languages can be marked with\u00a0
<span lang=\"language code\"><\/code><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t- Buttons and form fields are labelled and instructions provided<\/li>\r\n \t
- Complex information is presented in more than one format\r\n
\r\n \t- Provide chart data in table format, a glossary, etc. where appropriate<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Write at a level appropriate to the audience using plain language<\/a>\r\n
\r\n \t- Check spelling, grammar, usage<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<\/details>
Robust<\/summary>Is your web content robust? Can all devices use it?\r\n\r\nTo ensure content is robust, ensure the following best practices are met:\r\n\r\n \t- Content\r\n
\r\n \t- Works across browsers<\/li>\r\n \t
- Works on mobile devices<\/li>\r\n \t
- Is responsive to screen size and zoom level<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- HTML is reviewed and validated<\/li>\r\n \t
- Viewport
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code> supports reflow on user devices<\/li>\r\n<\/ul>\r\n<\/details>For more information consult: How to Meet WCAG (Quick Reference)<\/a>. Consider WCAG in Plain English<\/a> to wade through the jargon and terminology required of a complex set of standards like WCAG.\r\n<\/a>Checklists<\/h2>\r\nBasic Checklist<\/h3>\r\nConsider the interactive Web Accessibility Checklist<\/a> to assess the accessibility of web content. This tool allows you to check off criteria as you work and expand each criteria for more information and links to further guidance.\r\nAdvanced Checklist<\/h3>\r\nThe A11y project provides an interactive checklist<\/a> to check web accessibility.\r\n\r\nFor contextual information, consider the Province of British Columbia's\u00a0guide to creating accessible web products<\/a>.\r\n<\/a>Accessibility and Design<\/h2>\r\nMany web accessibility features are invisible and will not interrupt design choices:\r\n\r\n \t- [pb_glossary id=\"1161\"]Alt text[\/pb_glossary] is hidden in code, read only to screen readers\r\n
\r\n \t- Figure captions are a common practice that provide image descriptions to all users<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Descriptive hyperlinks are more useful for all users\r\n
\r\n \t- Users can verify the URL by hovering on the link and viewing the URL in the bottom-left of the browser window<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- [pb_glossary id=\"1105\"]Heading[\/pb_glossary] tags
<H1> <H2><\/code> etc. are code to provide structure\r\n\r\n \t- Modify CSS to change style<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- [pb_glossary id=\"2026\"]Tables[\/pb_glossary]:
<th> <tr> <td><\/code> are coded within the table and do not change appearance\r\n\r\n \t- Tables can be styled using CSS<\/li>\r\n \t
- Tables are for data, not to create structure. Use columns, flex-grid, or other layout tools for alignment and spacing<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Lists:
<ul> <ol> <li> <dd><\/code> are code to organize lists, but appearance can be modified with CSS<\/li>\r\n \t- Language and viewport attributes are part of your HTML document\r\n
\r\n \t- You can set a different language for part of your page:
<span lang=\u201des\u201d>Hola. Me llamo Pablo<\/span><\/code>. This has no effect on styling<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t- Making your page keyboard accessible changes nothing about appearance<\/li>\r\n \t
- Form labels are expressed in visible text regardless and made accessible with
<label><\/code><\/li>\r\n \t- [pb_glossary id=\"1164\"]Closed captions[\/pb_glossary], [pb_glossary id=\"1884\"]transcripts[\/pb_glossary], and [pb_glossary id=\"1361\"] audio descriptions[\/pb_glossary] are a user choice<\/li>\r\n<\/ul>\r\n
<\/a>Tools and Further Reading<\/h2>\r\nIf working in WordPress, read WordPress Block Editor<\/a> for information on creating accessible posts and pages.\r\n\r\nIf copying content from a Word document, consider using HTML Cleaner<\/a> to remove excess code while retaining your desired look and layout.\r\n\r\nConsider\u00a0Universal Design for the Web<\/a> for further tips and guidance.\r\n\r\nThe following tools are useful for checking existing content for accessibility:\r\n\r\nWAVE by WebAIM<\/a> testing tool extension.\r\n\r\n \t- Flagged errors MAY not necessarily indicate a problem, but rather something that needs to be manually checked<\/li>\r\n \t
- The Reference tab provides information on how to amend errors on your page<\/li>\r\n \t
- WAVE allows you to toggle CSS off to review the page structure in simpler terms and verify that no information is dependent on styling alone<\/li>\r\n \t
- The contrast tab allows you to change page elements colour in a real-time preview<\/li>\r\n \t
- The source viewer incorporates the errors and alerts into a code preview to aid in locating issues<\/li>\r\n \t
- Consult WebAIM: Web Accessibility Evaluation Guide<\/a> for more information about how to use WAVE.<\/span><\/li>\r\n<\/ul>\r\nEdge and Chrome include Lighthouse (Chrome DevTools)<\/a> for testing website accessibility. Review understanding Lighthouse error messages<\/a> for more information.\r\n\r\nUse the Firefox Accessibility Inspector<\/a> to investigate code-based accessibility errors.\r\n\r\nUse the MagentaA11y toolbox<\/a> to understand how to perform manual tests.\r\n\r\n
<\/code><\/div>\r\n<\/div>","rendered":"Accessible web content is designed to remove barriers and provide equitable access to information. Users may encounter barriers due to their visual, motor, auditory, or cognitive access means. Web design significantly impacts users\u2019 experience; proper formatting and tool use aids all users to access web content. Properly designed web content is the most accessible and user-friendly format for (almost all types of) information.<\/p>\n
On this page:<\/strong><\/p>\n
alt=\"\"<\/code>\r\n\r\n \t- Consider the Alternative Text Quick Start Guide<\/a> for more information<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Videos and audio are\u00a0captioned<\/a>\u00a0or have\u00a0transcripts<\/a>\u00a0or both\r\n
\r\n \t- Learn more with the Closed Captioning Quick Start Guide<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Information\u00a0does not rely on colour alone<\/a>\u00a0to convey meaning or highlight information<\/li>\r\n \t
- There is enough\u00a0contrast between the colour of the text\u00a0<\/a>and the colour of the background\r\n
\r\n \t- Consider Accessible Colour<\/a> for more information about colour<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Fonts are sans-serif and 16px or larger<\/li>\r\n \t
- Webpages have semantic order and meaningful context<\/li>\r\n \t
- Buttons, controls, and form fields<\/a> have descriptive HTML labels<\/a><\/li>\r\n \t
- Ensure no content flashes more than 3 times per second<\/li>\r\n<\/ul>\r\nRemember, HTML is content and CSS is style. Ensure no information or function is dependent on CSS alone. Use tools (discussed below) to view webpages without styling.\r\n\r\n<\/details>
Operable<\/summary>Can all users navigate the page and operate any interactives using their preferred or required input method (mouse, keyboard, touch, voice, etc.)?\r\n\r\nTo ensure content is operable, ensure the following best practices are met:\r\n\r\n \t- The page is logically navigable using only a keyboard\r\n
\r\n \t- Check
tabindex<\/code> and :focus-visible<\/code><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t- The page has\u00a0skip link<\/a>(s) and multiple ways to navigate between pages<\/li>\r\n \t
- Pages have meaningful and unique titles in the
<title><\/code><\/li>\r\n \t- Pages have semantic structure with regions<\/a>,\u00a0headings<\/a>, and\u00a0lists<\/a>.\r\n
\r\n \t- For more information read Structure \u2013 Accessibility Handbook for Teaching and Learning<\/a>.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Media does not autoplay<\/li>\r\n \t
- Users are able to pause animations and carousels<\/li>\r\n \t
- Link text is meaningful and describes the destination\r\n
\r\n \t- Do not use \"click here\" or \"read more\" as link text<\/li>\r\n \t
- Learn more about accessible links<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Buttons accurately describe their action<\/li>\r\n<\/ul>\r\n<\/details>
Understandable<\/summary>Is the content understandable?\r\n\r\nTo ensure content is understandable, ensure the following best practices are met:\r\n\r\n \t- Consistent, predictable navigation<\/li>\r\n \t
- Clear link text and link purpose<\/li>\r\n \t
- Use links and buttons correctly\r\n
\r\n \t- Buttons do something (e.g. open\/close, toggle on\/off, etc.) while links go somewhere (e.g. somewhere else on the page or a different page or site)<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Clear and consistent error messages that receive focus<\/li>\r\n \t
- Abbreviations and acronyms are explained<\/li>\r\n \t
<lang><\/code> attribute matches the language of the content\r\n\r\n \t- Individual parts of pages using additional languages can be marked with\u00a0
<span lang=\"language code\"><\/code><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t- Buttons and form fields are labelled and instructions provided<\/li>\r\n \t
- Complex information is presented in more than one format\r\n
\r\n \t- Provide chart data in table format, a glossary, etc. where appropriate<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Write at a level appropriate to the audience using plain language<\/a>\r\n
\r\n \t- Check spelling, grammar, usage<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<\/details>
Robust<\/summary>Is your web content robust? Can all devices use it?\r\n\r\nTo ensure content is robust, ensure the following best practices are met:\r\n\r\n \t- Content\r\n
\r\n \t- Works across browsers<\/li>\r\n \t
- Works on mobile devices<\/li>\r\n \t
- Is responsive to screen size and zoom level<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- HTML is reviewed and validated<\/li>\r\n \t
- Viewport
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code> supports reflow on user devices<\/li>\r\n<\/ul>\r\n<\/details>For more information consult: How to Meet WCAG (Quick Reference)<\/a>. Consider WCAG in Plain English<\/a> to wade through the jargon and terminology required of a complex set of standards like WCAG.\r\n<\/a>Checklists<\/h2>\r\nBasic Checklist<\/h3>\r\nConsider the interactive Web Accessibility Checklist<\/a> to assess the accessibility of web content. This tool allows you to check off criteria as you work and expand each criteria for more information and links to further guidance.\r\nAdvanced Checklist<\/h3>\r\nThe A11y project provides an interactive checklist<\/a> to check web accessibility.\r\n\r\nFor contextual information, consider the Province of British Columbia's\u00a0guide to creating accessible web products<\/a>.\r\n<\/a>Accessibility and Design<\/h2>\r\nMany web accessibility features are invisible and will not interrupt design choices:\r\n\r\n \t- [pb_glossary id=\"1161\"]Alt text[\/pb_glossary] is hidden in code, read only to screen readers\r\n
\r\n \t- Figure captions are a common practice that provide image descriptions to all users<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Descriptive hyperlinks are more useful for all users\r\n
\r\n \t- Users can verify the URL by hovering on the link and viewing the URL in the bottom-left of the browser window<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- [pb_glossary id=\"1105\"]Heading[\/pb_glossary] tags
<H1> <H2><\/code> etc. are code to provide structure\r\n\r\n \t- Modify CSS to change style<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- [pb_glossary id=\"2026\"]Tables[\/pb_glossary]:
<th> <tr> <td><\/code> are coded within the table and do not change appearance\r\n\r\n \t- Tables can be styled using CSS<\/li>\r\n \t
- Tables are for data, not to create structure. Use columns, flex-grid, or other layout tools for alignment and spacing<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t
- Lists:
<ul> <ol> <li> <dd><\/code> are code to organize lists, but appearance can be modified with CSS<\/li>\r\n \t- Language and viewport attributes are part of your HTML document\r\n
\r\n \t- You can set a different language for part of your page:
<span lang=\u201des\u201d>Hola. Me llamo Pablo<\/span><\/code>. This has no effect on styling<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t- Making your page keyboard accessible changes nothing about appearance<\/li>\r\n \t
- Form labels are expressed in visible text regardless and made accessible with
<label><\/code><\/li>\r\n \t- [pb_glossary id=\"1164\"]Closed captions[\/pb_glossary], [pb_glossary id=\"1884\"]transcripts[\/pb_glossary], and [pb_glossary id=\"1361\"] audio descriptions[\/pb_glossary] are a user choice<\/li>\r\n<\/ul>\r\n
<\/a>Tools and Further Reading<\/h2>\r\nIf working in WordPress, read WordPress Block Editor<\/a> for information on creating accessible posts and pages.\r\n\r\nIf copying content from a Word document, consider using HTML Cleaner<\/a> to remove excess code while retaining your desired look and layout.\r\n\r\nConsider\u00a0Universal Design for the Web<\/a> for further tips and guidance.\r\n\r\nThe following tools are useful for checking existing content for accessibility:\r\n\r\nWAVE by WebAIM<\/a> testing tool extension.\r\n\r\n \t- Flagged errors MAY not necessarily indicate a problem, but rather something that needs to be manually checked<\/li>\r\n \t
- The Reference tab provides information on how to amend errors on your page<\/li>\r\n \t
- WAVE allows you to toggle CSS off to review the page structure in simpler terms and verify that no information is dependent on styling alone<\/li>\r\n \t
- The contrast tab allows you to change page elements colour in a real-time preview<\/li>\r\n \t
- The source viewer incorporates the errors and alerts into a code preview to aid in locating issues<\/li>\r\n \t
- Consult WebAIM: Web Accessibility Evaluation Guide<\/a> for more information about how to use WAVE.<\/span><\/li>\r\n<\/ul>\r\nEdge and Chrome include Lighthouse (Chrome DevTools)<\/a> for testing website accessibility. Review understanding Lighthouse error messages<\/a> for more information.\r\n\r\nUse the Firefox Accessibility Inspector<\/a> to investigate code-based accessibility errors.\r\n\r\nUse the MagentaA11y toolbox<\/a> to understand how to perform manual tests.\r\n\r\n
<\/code><\/div>\r\n<\/div>","rendered":"Accessible web content is designed to remove barriers and provide equitable access to information. Users may encounter barriers due to their visual, motor, auditory, or cognitive access means. Web design significantly impacts users\u2019 experience; proper formatting and tool use aids all users to access web content. Properly designed web content is the most accessible and user-friendly format for (almost all types of) information.<\/p>\n
On this page:<\/strong><\/p>\n