Video

Thanks for sharing - definitely helpful!

Check out our intro video to our Canvas Course Product - czcams.com/video/IrE0aOws9d4/video.html. Any questions let us know :)

Thanks for the suggestion! We'll add this to our list of video ideas.

Great question. As long as the data is loaded by the time the user interacts with the table, and it has the correct semantics, it will work with the screen reader. Something to consider though: If something other than a user interaction changes the dynamic content, you have to really think through how users with different disabilities would know. Otherwise, the content would change, and the user wouldn't know.

Hello! A great way to start making your website accessible is by learning the accessibility basics. We have resources for all the main accessibility topics here: blog.pope.tech/2022/04/06/monthly-accessibility-focus-and-training-resources/ If you're looking for support through accessibility tools, here's our contact form to get in touch with our accessibility team: pope.tech/contact Let us know if there are additional questions!

Great question! A lot of accessibility strategies translate to documents as well. When it comes to tables and Word documents, they should have identified column or row headers. That's all the capabilities Word currently has for making tables more accessible. Here are two resources: - WebAIM's creating accessible documents. You can choose your version of Word at the top to learn more: webaim.org/techniques/word/#tables - Microsoft's Create accessible tables in Word: support.microsoft.com/en-us/office/video-create-accessible-tables-in-word-cb464015-59dc-46a0-ac01-6217c62210e5 Let us know if there are additional questions - thanks!

Thanks for your comments and support - we really appreciate it! We do have some videos specifically on: - Chrome's accessibility tree (a dev tool): czcams.com/video/pJL6qtfYkBo/video.html - Screen reader testing: czcams.com/video/_eLUi_-jDQc/video.html - Color contrast: czcams.com/video/qbrJppIKYFM/video.html - Close captioning: czcams.com/video/hzYktavsiXY/video.html - Manual accessibility testing: czcams.com/video/uO8NJqAtMLM/video.html But, that's a good idea to create a video that incorporates the whole process. Thanks for the suggestion - we'll keep it in mind as we create more videos. Again, thanks for your support!

That's a really good question. In general, height doesn't matter. For most responsive websites, you just need the height tall enough to be able to test. Then, you'll test to make sure no horizontal scrolling is happening (unless required for the content), everything is usable, there is enough spacing to click and interact with the content, and there isn't any loss of content. If your website uses height-specific media queries, then you'd want to make sure to incorporate those heights in your testing. But, for the second zoom test (400% at 1280 px wide) there isn't a specific height you need to be at. Thanks for the great question!

Hello! Here are some things to try. First, make sure you're using the right and left arrow keys to navigate to the different rotor lists. If it's not showing up there, try opening the VoiceOver Utility (app on Mac) > Web > Web Rotor. From there, make sure Heading is selected as one of the lists that is in the rotor. You might need to restart VoiceOver or even your Mac after doing that for the change to take place. Please reach out with any other questions!

Hi! Thanks for letting us know. The thumbnail should show now. I tested using embed, and it is showing. Please reach out if there are still issues. Thanks again!

Good point and thanks for asking! The Headings list is in the rotor. To open the rotor while using VoiceOver, press the VoiceOver modifier key (Caps Lock key or the Control and Option keys pressed at the same time) + U. From there, use the left and right arrow keys to navigate the different lists available in the rotor until you get to the Headings list. Here's a VoiceOver rotor resource: support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac

Thank you! Got it working @@popetech I was pulling up the rotor but was not aware of the + U.

The solution would be there needs to be an accessible label for each input. That label could be hidden or visible. These are the accessible labels that can be matched to the input field and read by a screen reader: label element - Users see this label, and it’s announced by screen readers. Can be hidden with CSS. ARIA-label attribute - Only announced by screen readers. ARIA-labeledby attribute - Only announced by screen readers. title attribute - Users see this label when they hover over the input, and it’s announced by screen readers. Learn more about form accessibility at: blog.pope.tech/2022/10/03/a-beginners-guide-to-form-accessibility/

NVDA's keyboard commands can't be turned off. If the goal is to have NVDA read everything that's on the page, you could try the keyboard command VoiceOver modifier (Caps lock) + Down arrow key. This will start reading all the page content from where the screen reader focus is on the page. But, if you pressed another keyboard command from here, NVDA would then follow that command.

Thank you for the video topic idea! We have the topic "vetting developers to build accessible websites and apps" on our blog article list ideas currently and can consider a video. In the meantime, something you could do when interviewing people is use the WAVE tool to test some of their work for accessibility. Here is an article on using the WAVE tool: blog.pope.tech/2022/12/02/wave-accessibility-testing/ Thanks again!

Thanks! Our most recent video is How to review your website's ARIA: czcams.com/video/Ouj84wLTOas/video.html

Thanks! We try to add new videos about every other month. Check out our channel for all our videos - czcams.com/channels/zw1xXvTRYpmhh1rp-G0xMQ.html

@dilrubaahmed8302 can u explain in details what are your takeaways from this videos for a11y testing point of view

When using the WAVE browser extension you can run it at any point and it will test what is currently loaded in your browser. This can be great for SPAs, testing user flows and local development.

Hi James. That is correct. For example, I just tested this on Mac OS Ventura 13.2.1 and VoiceOver announced "more content available" and I had to select VO key + Command + Slash key to open the "more content menu." From there, I selected the down arrow to navigate the more content menu and have the aria-describedby text announced. Users can also change settings to not hear this content at all. This is still a good method because the content is accessible without the ARIA but the aria-describedby makes it easier to use and understand for most users. Thanks for your question!

Thank you! We have resources for all sorts of accessibility topics if they'd be helpful: blog.pope.tech/2022/04/06/monthly-accessibility-focus-and-training-resources/

@@popetech This is great! Thank you so much.

Hi! Thanks for your feedback. We'll incorporate this feedback in future videos and iterations of existing videos. In the meantime, we do have videos that include screen reader shortcuts if that would help. Getting started with VoiceOver: czcams.com/video/_eLUi_-jDQc/video.html Getting started with NVDA: czcams.com/video/h09RaEsRn6Q/video.html

@@popetech Thanks

Hello! I am using Mac's VoiceOver screen reader in this video. The screen reader you're using will effect how it's read. With VoiceOver, I can go into the web content group and then go to that entire list group, and it will read each line continuously. If you're using NVDA, you could navigate above the list and then use your modifier (Caps Lock or Insert) + down arrow, and it will read continuously until you press Control. Here are some resources that might help: - Navigating Groups with VoiceOver: czcams.com/video/_eLUi_-jDQc/video.html - Navigating with NVDA: czcams.com/video/h09RaEsRn6Q/video.html - webaim.org/articles/voiceover/ - webaim.org/articles/nvda/ Hope this helps!

The issue with save as PDF is it almost universally results in an image only PDF that has no content and is pretty much completely inaccessible. If the goal was to print the document this could be fine. It can depend on the program but in word for example exporting to a PDF would keep the text content and be much more accessible. Here is an article by WebAIM that you can reference to learn more about converting documents to PDFs - webaim.org/techniques/acrobat/converting.

This wouldn't really apply for the Accessibility Guide shown in this video. When using WAVE (wave.webaim.org) it will add a dotted line around any results that are hidden and grey them out. You can view them by turning off the styles toggle at the top of WAVE as well as opening the Code drawer at the bottom.

@@popetech ok thank you.