I'm working on identifying accessibility issues with a database-driven web application. One of the features of this web application is that the user can open up a modal window and filter by data columns. I included a couple of images to show what this looks like.
This is incredibly hard to use with a screen reader, mainly because I can't figure out how to associate the relationship dropdown with the input field. If a user selects a relationship (equal to, not equal to, greater than, etc...) I need to let the user know that it's associated with the input field to the right of it. But, I don't even know what this would be called or what I would wrap it in. Can anyone point me in the right direction?
Related
We are using an older character based version of QAD's MFG/PRO running on Progress version 10.1. On one of the shipping tables, I've to create a browse that will display all records in a scrollable browse (sort of infinite scroll browse). It will display first 10 records initially, but user will be able to scroll up or down in the browse, which should load previous or next record (up or down arrow key).
I was wondering how something like this can be achieved. Preloading a temp-table with millions of records doesn't seem like a good idea, querying the database for every up or down arrow key press sounds equally bad. Does DEFINE BROWSE provides a way to achieve this? Is there a way to code lazy loading type scenario?
Also, how the scenario would change if instead of a browse showing data from a single table, will combine data from multiple tables?
Any help/pointers in this regard will be helpful. Also, if some best practices can be shared.
You can look at the END and OFF-END events in the browse widget. This will alert you when the user wants to scroll forward/backward. The query associated with the browse also has an OFF-END event that you could look into using for this.
Doc at https://docs.progress.com/bundle/abl-reference/page/High-level-widget-events.html#High-level-widget-events
Does anyone know how I should handle aria-labels on link labels that repeat dozens of time on a page? My website accessibility checker tool keeps flagging these elements as using the same link text for these labels and they require unique aria-labels. Problem is, all of the links go to the same generic pages and am not sure how to make the aria-labels specific enough.
Has anyone dealt with anything like this before and how did you handle it? I imagine I'd need a JS solution to inject aria-labels, but before I invest in a JS resource doing this for me does anyone know how I can make these specific enough to pass the checker but not confuse screen readers?
Screenshot of category labels for each article
In this case, it is correct to hide all duplicate links except for the first element that contains these labels
You force people with disabilities to navigate through all the same links using keyboard navigation, this is also bad for a screen reader
1.) Hide any duplicate labels from your screen reader
aria-hidden="true"
2.) Hide any duplicate labels from keyboard navigation
tabindex="-1"
Note! don't forget to leave one unique link! You can also hide everything and add them to context under elements or above elements. When I say hide, I mean the above methods.
It's easy to check for accessibility, close your eyes and imagine you click on a tab and hear (in a screen reader) a re-link through every two elements! This is annoying isn't it?
There is no need for aria-labels and what you are doing is not an accessibility fail. You have to bear in mind the automated accessibility checkers are dumb (and in this case quite possibly wrong) and are only there to offer guidance on common accessibility fails.
The main reason you are seeing this is that the accessibility checker thinks that this is text like "read more" that is not descriptive of the end-point. It should pick up the fact that the end-point is the same but it obviously does not.
Using the same link text for links that go to the same page is encouraged:
It is a best practice for links with the same destination to have
consistent descriptions (and this is a requirement per Success
Criterion 3.2.4 for pages in a set). It is also a best practice for
links with different purposes and destinations to have different
descriptions.
Source: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html
Also one of the checks for success criterion 3.2.4 - Consistent Identification is:
Check that this associated text is identical for each user interface
component with the same function.
Source: https://www.w3.org/WAI/WCAG21/Techniques/general/G197.html
Assuming your articles are marked-up correctly a screen reader user could skip between headings (<h2>s for example) in order to not hear the same category links. This is one of the primary ways a screen reader user will navigate a page (via headings).
For this reason the categories should be AFTER the heading in the HTML so that they are read out after the heading.
You could place the heading visually after the tags using techniques similar to those in this answer I gave. This would be acceptable for "logical tab order" in my opinion so you wouldn't fail there.
Your only other option would be to use aria-hidden="true" and tabindex="-1" on your category links to hide them from screen reader users and take them out of the tab order. If you did this you would need to ensure a categories list is available at the side of the page.
Personally I would go with the first option as the categories information is useful to screen reader users, the fact the links repeat themselves over and over if I search by links would indicate they are categories to me when using a screen reader anyway.
If I have an Adobe Target experience that shows content in Experience A to 50% of users and content in Experience B to the other 50% of users...how can I insert someone into one of these two experiences?
I was thinking of having a button the user can click that has a url parameter added to it for example ?exp1, and then a different button that would have ?exp2.
But if I use the refinement 'url contains exp1 or exp2' in each of the experiences in target, then that is only when the mbox will fire. Whereas I want them to fire on the original page that the mbox is on.
Any help is greatly appreciated...thank you all!
Adobe Target will serve up your two experiences without having a user click a button. You can have experience A hard coded on your site. Then when you go to make your Target A/B test just enter the URL in the first pop-up box that asks for the activity URL.
Then on the next page Experience, A should be what was hard coded and live on your site. Select experience B and code up your second experience. When done you will select your audience - most likely all visitors and then make sure your set to 50/50 split.
This was a visitor will automatically be shown either A or B when they come to your site. The target mbox fires when the page loads and makes the decision who to show what to automatically. One interesting quirk with Adobe Target is that they don't send one customer to A then the next to B and the next to A as you may expect. Sometimes they send a bunch to A back to back before sending some to B. It works out to a 50/50 over time. And the first 24 hours of data may look a little funky as there is sometimes a latency in data being processed. Hope this help.
I have a group of users that will be using a web database.
Ideally, I would like these users to view that website with some user styles of our creation (so that some of the website elements are displayed differently, like highlighting fields they need to fill out). These users are independent and remote, meaning that we can't really access their computers to do anything to set this up (like setting up Stylish for them).
I was wondering if we could somehow create a package that will display the website using such stylesheet, as if it was an application rather than a website that they visit with their browser.
The idea would be that by opening this "app" they're actually opening a dedicated browser window to this webpage where they can interact with it, can't navigate away (just no address bar), and uses this stylesheet I mentioned. Thus the "as if it was an app".
I hope I was sufficiently clear. I don't even know what this would be called (not even what tags to use), so my research has really taken me nowhere. Guidance on how to get this done will be highly appreciated. If somebody has a better idea of how to obtain a similar result, I'll be happy to experiment!!
Thanks!
Will the users be logging in through user accounts in your database?
If so, create a column in the user database which, should it return a certain value (say true for these special users and false for all else) then a different stylesheet is used.
Let's say a user has a list of projects, and each project has it's own set of various collection items of charts, reports, tags, etc associated by project._id
When a user selects a project, all the associated collection items are viewable by route, for example /project/<projectId>/chart/<chartId>
Currently, a user can only view one project at a time. If he opens up a new tab or a new browser, he can still only view the one project. If he switches the project, all the other tabs/windows reactively change to the new project. This is because currently the project is tied to Meteor.user.profile.projectId (but I am looking for a better way).
I would like to change this behaviour so that tabs and windows are independent of each other. If a user pastes project\project1 into a new window it should load that and it's associated collections even if his current tab is in project\project2. I hope that makes sense.
I'm not sure how to accomplish this. I am looking for suggestions and solutions. Thanks.
I believe that this can easily be accomplished using session variables:
set a default somewhere in your client code, Session.setDefault('project', 1) (or make sure that project being undefined is handled gracefully)
when a user selects a project, set the variable:
Session.set('project', [selectedProjectId])
Wherever you need to decide which project to show: Session.get('project')