Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
The community reviewed whether to reopen this question 9 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I have a web page with a main Menu or Main navigation in the header. Like below
This header menu is present across all the pages.
Requirement is to remove this main header menu from one particular page.
Few questions below:
Does removing the main menu violate any of the WCAG 2.1 guidelines?
Is it legal to remove the Main heading Menu from a page?
Will this change cause any accessibility issue?
The section of WCAG that you're going to need to meet is 3.2.3. Consistent Navigation.
Success Criterion 3.2.3 Consistent Navigation (Level AA): Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
I'd also recommend reading the sufficient techniques and failures.
It's a common practice in landing page development to remove any navigation elements from the page. I don't believe that this alone would be a failure, as long as you're not dynamically removing the menu after page load.
What you need to be mindful of is that you're not offering different navigation on different pages of the site, and that if a navigation menu is present on the page, then it needs to be in the same place on each page it appears.
I don't believe that the absence of a navigation menu necessarily results in a failure. The failure example given specifically states that the page in question must have a navigation menu present in order to fail.
Accessibility is about making sure your website is available to the greatest number of people. Removing things from the page so that no one has access to them is not an accessibility issue. There's nothing to give access to, so to speak.
However, if you "remove" the menu by making the opacity transparent or by "pushing" the menu off the screen and don't really remove the menu from the DOM or use CSS display:none, then that would cause an accessibility issue.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I've always wondered how the "read mode" extensions know exactly where the main content is.
If every webpage out there had its main content in a div marked with the id of #content or something. But is there a way to know which div is the wrapper for the main content?
Here's what I want to do
I want to create a script where I inject a text box to the right of any webpage so that I can take notes (Eloquent is an example chrome extension that does this - but it doesn't push the content, it makes the textbox dragable instead - don't like it). Then the notes I take would go to my mongo databases (all done)
But when I add the textbox to the page, I would love to push the main content to te side.
Here's a screenshot of what I have so far
As I said, if I want this to just run on wikipedia for example I could hardcode the element id/class. But is there a way to check for the main content regardless how the developers might have labled it
Unfortunately, there's no way to be absolutely sure for every page on the internet. There are mechanisms to try and signal what is the "main" bit of a page. Two of the "main" ways to do it are
The <main/> tag
The HTML element represents the dominant content of the
of a document. The main content area consists of content that is
directly related to or expands upon the central topic of a document,
or the central functionality of an application.
role="main"
The main landmark role is used to indicate the primary content of a
document. The main content area consists of content that is directly
related to or expands upon the central topic of a document, or the
central functionality of an application.
However, websites aren't breaking any real rules and will still render in most browsers if they don't include either of these. They are mostly ways to help users that require screen readers be able to view content.
You mentioned you were looking at how Wikipedia does it and they use the role="main" mechanism.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I would like some guidance / ideas for the following problem: How can someone lock the scrolling of a web page in order to present content to the user in a specific sequential way? For example, I would like a web page to have 3 sections, and with an onclick to scroll to a specific section id_1, then with another on click to scroll to section id_2 etc., but only with the onclicks to do that scrolling and prevent the user to scroll by himself with his mouse or with the scroll bars. Thanks!
If these are your specs you absolutely have to follow, which I highly recommend against anyway, you could just make each section stretch to fill the screen and make them fixed. Then provide a button to toggle in between the different sections.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm inspired by app.thefacesoffacebook.com and would like to build similar thing with Yammer (kind of social network) profiles for my organization.
I have already scraped the data I required like profile id, image URL and others in stored in the data base. But how to display the images in the webpage like app.thefacesoffacebook.com? Is it normally getting the URLs from DB and displaying images with IMG tag or any other trick they are using. I'm expecting to see the similar behaviour when you click on one image it should zoomin. I'm not really sure about to go about this, any ideas would be helpful. I hope information is enough to guide me, let me know if this makes sense.
Thanks
This is a question whose answer would really be immense, but from a bird's eye view, the most common way to implement this would be to employ pagination.
Pagination is a "lazy loading" scheme in which groups of images are loaded in predefined amounts. For instance, you may see a group of 20 images onscreen, but when you scroll to the bottom of those 20 images, an event is fired and the next 20 images are loaded and appended to the window.
If you can imagine in the olden days, before dynamic html, you would have had separate "pages" for each "chunk" of images. To see the next 20 images, you would click "next". Modern implementations are not much different in practice, only that they use JavaScript to asynchronously load each chunk automatically, and append it to the current page.
A small, abstract example might be as follows:
window.addEventListener("scroll", function() {
var i = 0;
if ( scrolledToBottom() ) {
i++;
loadNextImageGroup(i);
}
})
For more information on pagination and pagination techniques, check your favorite search engine for "pagination tutorials".
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
There is no custom css set for smaller resolutions. I am having a problem where if I load the webpage at a low enough resolution, click the contact box, I cannot enter any fields till I stretch the browser to a larger resolution. At this point I can edit the contact box and also go back to the mobile resolution and have it still be operable.
The only way to truly explain this would be for you guys to go to the temporary site I setup here. I have scanned the HTML code to see if I am missing a closed div or something, but this scenario is very odd to me, especially since it works at a full resolution.
Please let me know what I am missing, I have exercised all of the possibilities.
It seems to be a problem with the z-index of either the pop-up or the background/overlay that comes up with it. I pulled up the dev tools and set a high z-index on the pop-up and a low index on the overlay and that fixed it. However, the elements are reset each time you open the pop-up. That makes me think that the elements are generated each time rather than shown/hidden. Whatever the situation is, you'll need to add an appropriate z-index to either the css or the element's themselves (inline - not recommended) and possibly with an !important depending on what all is going on in the code.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a Wordpress page with a biult-in search function. The results show up in the sidebar, and when a link is clicked, the content of the link shows up in my main content part.
The problem is when you use the site on small screens, 800px and down. When such a screen is used, the sidebar simply shows up under the content (The search results will still be on the top of the page unless a link is clicked, since there is no content then). However, when a link is clicked, I would like to hide the sidebar, since the search results are no longer needed, a "back" button is provided on small screens instead.
My question is, is there a way to hide the sidebar only when the user is on a specific page, in this case the page that shows up when a search result is clicked? I have looked up most of the CSS pseudo-selectors without getting anywhere.
If this is not achievable via CSS, Javascript would also be fine.
The page can be found here: http://stilius.se/wilink/
And a version with a performed search here:
http://stilius.se/wilink/store/products/category/stockholm_nacka_tullen_ica/?cat=41
The <body> has different classes on different pages and in different conditions. You can hide or show something using simple CSS cascade:
.search #sidebarborder { display: none; }
You can check all available classes here - http://codex.wordpress.org/Function_Reference/body_class
.linkClass:active #sideBarId { display: none; }