Hello! Ms. Pope tec, thank you for creating diff. videos that realy help me to enhance my skills in computer tech. I love all the videos related to NVDA, because I am a NVDA user. Bieng a Blind it is very helpful to me. My my name is Ar-jay Mameng from the Philippines. And I want you to know that your so LOVELY. ❤😅
I suppose I have a question about whether "vertical bar" is too disruptive to a Title and if we could use a different title format instead? Colon maybe?
Great question. When I used Mac's VoiceOver, it didn't announce ":" or "-". A user's screen reader settings could affect that though. It does announce "vertical line" like you pointed out. When listening to a screen reader announce it, the "vertical line" wasn't a huge detractor. What I think would be more disruptive is a long page title. Our recommendations are: - Be consistent on your website with how you structure page titles and the separator punctuation you decide on - Put the unique part first and keep it concise if possible. So, Admissions | Stanford is better than Stanford | Admissions - If you are using "|" or other separators, keep the general website title part concise as well. For example, Utah State University might overload the output on every page title. USU would be more concise and still fit the purpose.
Hello, just to make it easier for you, you can disable the welcome to NVDA dialogue so it doesn’t pop up every time you use it, I did this and find it helpful because then it means I won’t be interrupted by the pop-up every time I go to start it.
Check out our intro video to our Canvas Course Product - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IrE0aOws9d4.html. Any questions let us know :)
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!
What a nice video u deserve million likes Can u make video on end to end testing require for accessibility testing in one video i mean Cover all 1 Compliance 2 HTML 3testing with screen reader/AT ) 4 Color contrast 5 Close captioning 5 Usability with user n finding accessibility issue. HOw dev fixes the issue Then retesting with remediation then documenting n traing to stakeholder Then website monitoring regularly Can u explain with example Please
Thanks for your comments and support - we really appreciate it! We do have some videos specifically on: - Chrome's accessibility tree (a dev tool): ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-pJL6qtfYkBo.html - Screen reader testing: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_eLUi_-jDQc.html - Color contrast: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qbrJppIKYFM.html - Close captioning: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hzYktavsiXY.html - Manual accessibility testing: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uO8NJqAtMLM.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!
Hello, your accessibility video content is wonderful, but this video seems to have a thumbnail missing. I'd like to embed it, but it looks broken... 😞I hope you can update that soon! Thanks in advance if you can!
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
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!
This is great! I was looking for exactly this sort of resource. Both a demonstration of the issue in a way that visual users can understand better and some very actionable advice. Thank you!
I have a single page application built with react that doesn't reload on navigation change. Can wave tool reevaluate the page after I click on a new content tab?
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.
I believe in MacOS Monterey and above, instead of reading the aria-describedby text, it will read "more content available". You have to press some key combinations for VoiceOver to read the content. Can you confirm?
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/
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_eLUi_-jDQc.html Getting started with NVDA: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h09RaEsRn6Q.html
Hello. Can you, please, share how make screen reader read all list items at once? Like at ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Bc_hOdmVQc0.html I tried many possibilities and it reads only one by one
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_eLUi_-jDQc.html - Navigating with NVDA: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h09RaEsRn6Q.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.
Hello. Thanks for the video. I have a question. For visually hidden elements, How would you know what the alt text should be since it’s not visible on the webpage. Thank you
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.
