Using Voiceover to jump to internal links - html

I am looking for a way to go from my navigational links using voice-over accessibility to jump to the internal part of the page that link I connected to.
For example:
I have a list of links on my left-hand side. One is for Forms. When I click on "Forms" my list of forms will populate to the right of that panel, and then if you click on a specific form, that Form will appear to the right of that panel. The page contains 3 panels with Navigation on the left, list in the middle, Form on the right.
Right now if I click on the Form link, I have to tab through my entire nav panel to get to the newly opened Forms list.
Are there some ARIA elements I am missing that will help tab directly into my Forms List from the Forms link?

There are two simple ways to do this.
Note that neither of the following ways need any aria to work, the aria in the following examples is purely for best practices when adding sections and headings to a page.
Option 1 - anchors
The first is using anchors pointing to ids on the page.
in your side bar
forms
main page section
<section aria-labelledby="forms">
<h2 id="forms">Forms</h2>
<!---your forms --->
</section>
Notice how I gave the page content a heading (pick an appropriate heading level) and then labelled the section with aria-labelledby. None of this is required to make this method work but it is a good practice.
The only thing you need to do is to make sure your href matches the ID of the heading.
However given that you are populating the forms on the right side of the page (I am assuming with an AJAX call) you may want to manually manage focus with JavaScript....
Option 2 - Use JavaScript and .focus()
If you are using JavaScript it is a similar principle, give the section heading an ID, but this time once the forms list has loaded set focus on the list heading.
html
<!--your link in the menu -->
forms
<!--section on the page, I omitted the aria here for clarity / simplicity but it is still needed-->
<section>
<h2 id="forms" tabindex="-1">Forms</h2>
</section>
JavaScript
// start: however you have this implemented at the moment
const formsLink = document.querySelector("#getForms");
formsLink.addEventListener('click', function(e){
e.preventDefault();
get('yourURL').then((data) => {
// populate the list
list.update(data);
// end: however you have this implemented at the moment
// once the list is populated set focus on the heading (last thing to do after everything else is done)
document.querySelector('#forms').focus();
});
});
Notice how in this example the <h2> has a tabindex="-1".
We need this to allow programmatic focus. We use -1 so we can focus the heading via JavaScript but it does not get added to the page focus order (so you can't access it with Tab).

Related

How to share anchor links with angular components on angular 14?

I have a component menu which contains a few anchor tags. Each tag brings the user to that respective page section. I am trying to share the same anchor tag among the other components.
For example, I have two more HTML components called homepage.component.html and details.component.html. For each I call the menu.component.html by its selector. Both homepage and details html components have an id for the section I wanna scroll to. Here's how it looks like:
menu.component.html
Go to content
for both homepage.component.html and details.component.html
<div class="home-content" id="content"> Here comes more code </div>
It should work just like in a non-dynamic html project, however, when the anchor tag is clicked, the url redirects to '' (which is the first/default page) and then it shows the content for the first page, instead of the current componenet I am on.
I have tried creating a function where I get the current url and using the router.navigate, I pass the parameters indicating the fragment:
menu.component.ts
currentRoute: string
scrollToItem(){
this.currentRoute = this.router.url
this.router.navigate([this.currentRoute], {fragment: 'content'})
}
menu.component.html
<a (click)="scrollToItem()">Go to content</a>
However, this function adds the id #content to the url each time the anchor tag is clicked, redirecting the user to my 404 page.
I wanted to know if there is a way to use an anchor tag on the menu.componenet.html, while all the items that have "content" as their ids in different components are going to be displayed. Hopefully I made my question clear. If there is still questions about how the error occurs I can create and shate a stackblitz project. Thanks in advance :)

Angular sub-navigation based on route

I'm building an Angular application with two levels of navigation in the header.
The top-level navigation are visible on all routes in the application, however the second-level navigation is context-specific and only exists on certain routes.
For example, when viewing a specific course in a university webapp, the second-level navigation might have links to description, prerequisites, the different subjects, etc.
One way of doing it is creating a subnav component that has a switch statement and renders the correct subnav component based on the route:
<div [ngSwitch]="currentRoute">
<course-sub-nav *ngSwitchCase="course"></course-sub-nav>
<students-sub-nav *ngSwitchCase="students">...</students-sub-nav>
<support-sub-nav *ngSwitchCase="support">...</support-sub-nave>
</div>
I don't like that solution because now the sub-nav component knows too much about all the different context-specific sub-navs.
Another approach is to use a service to manage it. i.e. having a SubNavService.setNavigationLinks(links: NavLink[]) that takes an array of links. The sub-nav component can then listen to changes to the SubNavService and dynamically render a list of sublinks.
This solution is a bit cleaner however it does mean that I need to call that service on ever top-level component to ensure that the sub-nav is being updated. I'd also need to clear the links on pages that don't require sub-navs.
A third solution might be doing something like:
<!-- In header.component.html -->
<div class="sub-nav">
<ng-content="subnav"></ng-content>
</div>
<!-- IN course-page.component.html -->
<div>
<subnav>
<!-- my nav links -->
</subnav>
<div class="course-content">
<router-outlet></router-outlet>
</div>
</div>
I like this approach the most given that if a subnav component exists, the subnav will be rendered, and if not, nothing will show. Additionally, the relevant component has full control over rendering the links within the subnav. however given that course-page isn't actually a child of the header, I'm not sure how I can make it work.
I was wondering if there's any way to get the last approach to work. If not, would the second approach be the most pragmatic solution to this problem or is there a cleaner solution that exists?
The cleanest solution would be the second you mentioned.
Having a service that would handle the menu - menu component would subscribe and listen for changes, meanwhile other components would handle what items they need to have in the menu.

Is it overkill to use two way assignment with WAI-ARIA Properties?

Is it repetitive/overkill, better or worse to use a two way assignment with aria-properties? for example using an aria-control and an aria-labelledby?
<div role="tablist">
Tab 1
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1"></div>
It is ok to do this and it is also ok to not do this. The reason it is ok to not do this are:
Firstly: role tabpanel is a region role and does not require a label, so having no label is ok.
Secondly: You should create something focusable inside your tab panel (e.g. the first heading) so that a user can tab directly from the selected tab into the tab panel. When they do this, the focus goes straight to the focusable element. This means that the tab panel label would never get read.
The argument in favor of doing this is that a screen reader user, using DOM navigation, would encounter the tab panel and know which tab is selected without having to navigate to the tab itself.

MediaWiki - how do I create a page which auto populates a link from the current page?

Hi sorry if this a daft question (newbie), I am currently using mediawiki-1.23.1 and have been looking for a way in which to create it easy for an end user to create a page. However I would love to be able to have a link auto-created/auto populate on the current page. I currently use the InputBox extension. But it doesn't seem to allow this additional function from my research. Is this a possibility through extensions, or will this have to be done via a custom php template?
current InputBox details.
<inputbox>
type=create
width=24
break=no
buttonlabel=Create new page
</inputbox>
Any help or direction would be really appreciated.
It is impossible to create a link from page A to page B automatically if you don't "mark" something on page B. And the simplest thing you can mark is "[[Category:...]]", like Bergi said. I will use preloaded text to make it easier.
What you need
If you want page in main namespace to be the page where end users type in InputBox, you need any extension that will show content of category page such as Extension:CategoryTree, or Extension:Dynamic Page List (see also Transclude a category in MediaWiki).
Steps
On page [[Template:PreloadedText]]
Put the following content
<!-- Do not edit under this line -->
<includeonly>[[Category:CreatedFromPageA]]</includeonly>
On page [[A]]
Put the following content
<!-- Show all pages in [[Category:CreatedFromPageA]] -->
<!-- Assuming you use Extension:CategoryTree -->
<categorytree hideroot="true" namespaces="-">CreatedFromPageA</categorytree>
<!-- InputBox -->
<inputbox>
type=create
width=24
break=no
buttonlabel=Create new page
preload=Template:PreloadedText
</inputbox>
For end users
On page [[A]], they will see every page that was created via the InputBox at the top. At the bottom, they will see the InputBox. After typing pagename and clicking the button, they will be brought to the page they typed. There will be the following text existing already
<!-- Do not edit under this line -->
[[Category:CreatedFromPageA]]
As long as they don't bother with these lines, after they click save, the new page will appear on the list automatically.

What is the best HTML approach when form inputs are spread throughout the page?

I am building a faceted search system that has inputs in a sidebar (the facets are check boxes), and an input in the header of the page (the main query box). All of these inputs are submitted simultaneously when the user submits a search.
The only way I can think of to make this work is to wrap the entire page in an HTML form tag. Something like the following pseudo-html:
<form>
<div id='header'>
<logo/>
<input id='q'/>
<!-- a bunch more stuff -->
</div>
<div id='sidebar'>
<div id='sidebar-facets-subsection'>
<input id='facet1'/>
<input id='facet2'/>
<input id='facet3'/>
<!-- a bunch more stuff -->
</div>
<div id='sidebar-form-subsection'>
<form id='unrelated-form'>
<input id='unrelated-input-1'/>
<input id='unrelated-input-2'/>
</form>
</div>
</div>
<!-- a bunch more stuff -->
</form>
This would work, except for three things:
I need to use other forms in the page, as I've indicated above.
I use different django templates to generate the header and the sidebar, making the templates have dependencies on each other.
It's a real mess since the sidebar is in reality about 100 lines, not three.
Is there a more clever way of doing this that I'm not aware of, or is creating huge HTML forms the norm? In circumstances like this, is it better to use Javascript to somehow generate the input entries in a more normal form? Or is that the only option?
Any creative solutions or ideas?
You can make it work with Javascript without sacrifying accesibility
Put all the checkboxes in the header and wrap them in div
Set up and empty but clean side bar
Using Javascript, move you checkboxes from the header into the side bar
Attach a callback to the form.submit event, and when the user submit the form, cancel the event then, take the data from the search field and the checkboxes and send it as an Ajax POST request.
Using a framework like jQuery, it's a 15 minutes job.
If the user has JS enable, the form will post the request and everything will work. If the user doesn't have javascript enable, the checkboxes will be in the header and so they will work, at just the price of a slightly less elegant design.
But people with Javascript disable are used to design changes so it's ok.
Use javascript to populate a hidden field with a list of this checkboxes name=value pairs on form submit and treat this in serverside code, spliting the string into an array, etc.
Please note that this is not a good aprouch, since you loose accecibility to those with javascript disabled. The form tag is the only accessible way of doing so.
You can try to change the layout, if you can, swaping the checkboxes with links of buttons that filters the data, almost the way most ecommerce sites do out there.
I believe you have two options:
1.) a page wide form element. All "submit" buttons submit to the same form and the server-side script processes the form for all filled elements. By page wide, I'm not being literal... The related inputs all in the same form tag. Other forms are placed in other form tags.
2.) multiple forms, with a client side script which populates hidden form fields with the data from the other form before submission.
1 requires more work, but 2 may not work for every visitor.
Do consider the fact that, just because you have one form container, you don't have to necessarily display everything together for the user. Encapsulate inputs in divs and position them according to your will. It may not be easy, but it's definitely possible.