Broken same page link example
0:58
Empty button error example
1:08
Жыл бұрын
How to review your website's ARIA
8:32
Пікірлер
@mohammedehtesham
@mohammedehtesham 18 күн бұрын
Please use screen reader when you make the tutorial it would be helpful for visually impaired users
@popetech
@popetech 10 күн бұрын
That is a great idea for a video, I have shared it with the team. In the meantime WebAIM has some accessibility information for using WAVE at wave.webaim.org/accessibility. The same principles would apply as the video but here are some tips specifically for screen readers. In user testing, screen reader users primarily read or navigate through the WAVE sidebar to get a summary, then navigate to the tested page to get the icons in context. WAVE uses frames and landmarks and regions and these can be used to jump to the sidebar and code view. You can also turn off categories or specific WAVE results in the sidebar so only what you are focusing on will be present. The sidebar uses tabs so the arrow keys will take you between categories. So for example when the video says "I am on the details tab" in the sidebar you would tab to the tab panel and then use the over key to get to the Details tab.
@InglésConMendez
@InglésConMendez 24 күн бұрын
It's an useful information, thanks😉
@mrshawnspencer
@mrshawnspencer Ай бұрын
Wonderful! Thank you for taking the time to post and share this. 🙏🏼 Much appreciated. 🌟
@mrshawnspencer
@mrshawnspencer Ай бұрын
Gobsmacked & Flabbergasted! 🙃 Thank you for taking the time to share your expertise.
@badzo
@badzo Ай бұрын
Very useful! thanks!
@venkateshn7617
@venkateshn7617 Ай бұрын
It's it work or non it work
@BrentSmith-u9w
@BrentSmith-u9w 2 ай бұрын
Is there a video showing us how to actually fix the tags? Thank you.
@popetech
@popetech Ай бұрын
We don't currently have a video showing how to fix the tags, but that is a great suggestion. We do have this article that goes over each of the PDF remediation tools in Adobe Acrobat and then how to use them to remediate a PDF: blog.pope.tech/2024/04/25/how-to-check-and-fix-pdf-accessibility-issues
@Michelle.Engstrom
@Michelle.Engstrom 3 ай бұрын
Thank you for posting this simple walkthrough! It really helped me test out a complex solution to a multi-page table.
@SQARM1
@SQARM1 3 ай бұрын
Thank you.
@SQARM1
@SQARM1 3 ай бұрын
your series is great, keep up.
@ArjayMameng
@ArjayMameng 3 ай бұрын
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. ❤😅
@mallorypjw
@mallorypjw 4 ай бұрын
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?
@popetech
@popetech 4 ай бұрын
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.
@مصطفيالجعفري-و4خ
@مصطفيالجعفري-و4خ 4 ай бұрын
احا
@SQARM1
@SQARM1 4 ай бұрын
thanks
@SQARM1
@SQARM1 4 ай бұрын
Thanks
@leonjames3089
@leonjames3089 5 ай бұрын
Thank you!
@liftylu
@liftylu 6 ай бұрын
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.
@popetech
@popetech 6 ай бұрын
Thanks for sharing - definitely helpful!
@anjuarora1963
@anjuarora1963 7 ай бұрын
Great video! Very informative
@kevincleppe5321
@kevincleppe5321 7 ай бұрын
Hold up now 👀👀👀👀👀
@popetech
@popetech 7 ай бұрын
Check out our intro video to our Canvas Course Product - kzbin.info/www/bejne/f6OoYZSFrNhsmpY. Any questions let us know :)
@AccessibleAnt-bh4zr
@AccessibleAnt-bh4zr 8 ай бұрын
Hi It would be great if you could run wave and show the different button errors, missing labels etc please...
@popetech
@popetech 8 ай бұрын
Thanks for the suggestion! We'll add this to our list of video ideas.
@buibui4466
@buibui4466 8 ай бұрын
thank you man
@sedan1886
@sedan1886 8 ай бұрын
Wonderful video! Thank you, the information helped a lot.
@anandshreshti4255
@anandshreshti4255 8 ай бұрын
Does this screen reader works when we are calling and displaying table data with http get response?? I.e. dynamically calling table data??
@popetech
@popetech 8 ай бұрын
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.
@cheriehughes7393
@cheriehughes7393 8 ай бұрын
Hello How do I get help making my website accessible?
@popetech
@popetech 8 ай бұрын
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!
@manjunathmanju574
@manjunathmanju574 8 ай бұрын
😮😊
@AccessibleAnt-bh4zr
@AccessibleAnt-bh4zr 9 ай бұрын
Hi Is this only for a HTML webpage or does this work in Microsoft Word documents?
@popetech
@popetech 9 ай бұрын
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!
@zaidentertainment-rj2jt
@zaidentertainment-rj2jt 9 ай бұрын
😮😮 your number I want to talk you personal
@rajendramodusu5980
@rajendramodusu5980 9 ай бұрын
Superb super easy explanation
@rajendramodusu5980
@rajendramodusu5980 9 ай бұрын
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
@popetech
@popetech 9 ай бұрын
Thanks for your comments and support - we really appreciate it! We do have some videos specifically on: - Chrome's accessibility tree (a dev tool): kzbin.info/www/bejne/pnuvZ6Sqm76eeNE - Screen reader testing: kzbin.info/www/bejne/lZavhpyVYs93h8U - Color contrast: kzbin.info/www/bejne/p5PVe6OmfrCMfK8 - Close captioning: kzbin.info/www/bejne/nqu8nKeXq9icjrs - Manual accessibility testing: kzbin.info/www/bejne/q4Cbf32ndtmAgq8 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!
@AccessibleAnt-bh4zr
@AccessibleAnt-bh4zr 10 ай бұрын
For the second test Zoom to 400% at 1280 Viewport, does the height of the page matter ,or what is the specified height?
@popetech
@popetech 10 ай бұрын
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!
@Heeeyak
@Heeeyak 11 ай бұрын
There is no heading list in my rotor. How do I get the headings list in my rotor?
@popetech
@popetech 11 ай бұрын
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!
@jasc552
@jasc552 11 ай бұрын
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!
@popetech
@popetech 11 ай бұрын
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!
@adirvolpi5145
@adirvolpi5145 Жыл бұрын
awesome !thanks ,great vid!!
@PswACC
@PswACC Жыл бұрын
Where is the part where you tell us how to bring up the heading list? lol
@popetech
@popetech Жыл бұрын
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
@PswACC
@PswACC Жыл бұрын
Thank you! Got it working @@popetech I was pulling up the rotor but was not aware of the + U.
@car530acces9
@car530acces9 Жыл бұрын
and the solution????
@popetech
@popetech Жыл бұрын
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/
@sloyit3267
@sloyit3267 Жыл бұрын
Is it possible in NVDA to turn off keyboard key presses? So that only what is on the pages themselves or on the desktop is voiced.
@popetech
@popetech Жыл бұрын
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.
@saifahmed7586
@saifahmed7586 Жыл бұрын
could you please do a video on accessibility testing interview questions and answers please 🤲🏼
@popetech
@popetech Жыл бұрын
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!
@saifahmed7586
@saifahmed7586 Жыл бұрын
one of the best accessibility channels
@norrisallison2698
@norrisallison2698 Жыл бұрын
😉 "Promo sm"
@doubletapuser
@doubletapuser Жыл бұрын
❤ It is very true that there is no limit to the suffering in our life due to inaccessible pdf😢
@doubletapuser
@doubletapuser Жыл бұрын
❤❤
@dilrubaahmed8302
@dilrubaahmed8302 Жыл бұрын
Great video. Waiting for more
@popetech
@popetech Жыл бұрын
Thanks! Our most recent video is How to review your website's ARIA: kzbin.info/www/bejne/habNaWetgbmCl9U
@-beee-
@-beee- Жыл бұрын
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!
@dilrubaahmed8302
@dilrubaahmed8302 Жыл бұрын
i really appreciate your teaching ..plz add more so that we can learn..
@popetech
@popetech Жыл бұрын
Thanks! We try to add new videos about every other month. Check out our channel for all our videos - kzbin.info/door/zw1xXvTRYpmhh1rp-G0xMQ
@dilrubaahmed8302
@dilrubaahmed8302 Жыл бұрын
this is very informative and details.looking for more to come for accessibility testing.. great video and great explanation
@kellypurpel5916
@kellypurpel5916 9 ай бұрын
@dilrubaahmed8302 can u explain in details what are your takeaways from this videos for a11y testing point of view
@richiesun9676
@richiesun9676 Жыл бұрын
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?
@popetech
@popetech Жыл бұрын
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.
@SimplisticallyDigital
@SimplisticallyDigital Жыл бұрын
This was so very helpful! Thank you. I am trying to make a PDF accessible for a class that I am taking.
@JamesWee-d3n
@JamesWee-d3n Жыл бұрын
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?
@popetech
@popetech Жыл бұрын
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!
@julietcrocco
@julietcrocco Жыл бұрын
Not sure why anyone has not left comments. This is awesome. Wonderful job. I am going to embed it in my course.
@popetech
@popetech Жыл бұрын
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/
@julietcrocco
@julietcrocco 8 ай бұрын
@@popetech This is great! Thank you so much.