PDA

View Full Version : Feedback: Pokécommunity should make better use of the HTML header system.


pokemonmasteraaron
May 22nd, 2013, 07:21 AM
Hello, while navigating the Pokécommunity pages today, I realized something. Hardly any headers! Headers aren't just for looks, they make websites more accessible to the visually impared such as myself.
Pokécommunity is completely accessible, however not always convenient. Doing a find search to find spesific posts and forums is quite, in my opinion, unnecessary.
There should be headings before each of the forums when you are viewing the main page, headings before each of the thread titles, and even before each of the categories.
Not a must, but would make Pokécommunity a more pleasant experience for the visually impared, and heck, maybe even for the sighted, I don't know. Just an idea, I am more interested in your opinion on the matter?

Cordelia
May 22nd, 2013, 07:33 AM
I'm not really sure what a HTML header is, but it sounds great! Could you give us an example?

abnegation
May 22nd, 2013, 09:39 AM
I'm a web-designer but I'm not entirely sure what you mean. Would you be able to give us an example? Designers are always looking for more ways to make web-pages more accessible, so if there's any way you could provide us with an example, that would be great.

Sydian
May 22nd, 2013, 10:04 AM
We have forum splashes at the top of each forum. Is that similar to what you mean? They can be edited with html, though I don't think that's a common knowledge among everyone so not ever forum has an html forum splash (Trade Corner and Challenges are the only ones that I know have one).

GenuineCorruption
May 22nd, 2013, 01:18 PM
Hello,
He's talking about the HTML heading tags. This is probably difficult to do since PC uses commercial forum software, and I'd suspect that it would require a good bit of modification to vBulletin itself.
In HTML, (now this might get filtered), the statement <h1>Pokemon</h1> would create a large heading on the page titled Pokemon. A screen reader would read this as "Heading level 1 Pokemon" and allow a key press to jump the curser directly to it. A statement like <h2>Fire pokemon</h2> would create a smaller heading titled Fire pokemon.

Again, I'd have to guess that this is easier said than done unless there's someone on the team who's familiar with vBulletin enough to mod it.

derozio
May 22nd, 2013, 01:28 PM
Replacing <> by [] would enable you to use heading tags in posts. It's a feature which is already in place.

abnegation
May 22nd, 2013, 01:41 PM
Oh you mean BB codes for heading tags? Well then.

Heading Title One
Heading Title One

Heading Title Two
Heading Title Two

Heading Title Three
Heading Title Three

GenuineCorruption
May 22nd, 2013, 01:52 PM
Would they work in thread or forum titles? I think that's what Pokemonmasteraaron is suggesting?

abnegation
May 22nd, 2013, 02:15 PM
I'm afraid not, that would be intrusive of the forum style and design. It would actually visually impair the screen and viewablility as opposed to enhancing it. There are plenty of screen assisting applications built into each operating system for that sort of assisting.

However, in respect of this, perhaps a style could be created for those who are visually impaired.

pokemonmasteraaron
May 22nd, 2013, 07:17 PM
Perhaps? But I didn't mean for the tags to work in titles, of corse not, I meant there should be headings above them or something. I don't know enough about the visual appearence of the forum to really say.

donavannj
May 22nd, 2013, 07:29 PM
The way the HTML header system works would be visually obstructive, and as far as I can tell, there aren't really any good ways to implement it within vBulletin.

There might be a vBulletin plugin that provides a solution to this somewhere on the web, but, not having a vBulletin license myself, I would not be able to scour the vBulletin forums for one that works with the version of vBulletin run here.

If one were found, there would still be the matter of getting it approved and implemented.

Counterfeit
May 24th, 2013, 05:28 AM
I don't know how dirty it is as it didn't take too long at all, but I think I was able to do what you're asking on another forum.

The following edits should wrap forum categories, forums, sub forums and then threads with the <header>.

I don't know if the different numbers are necessary; I haven't tested it with any screen reading/magnifying software, which is why I can't be certain of anything!

(Master Style) Template Modifications:

forumhome_forumbit_level1_nopost:


<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]" class="categorytitle"><h1>$forum[title]</h1></a>
<if condition="$show['forumdescription']"><div class="smallfont"><span class="categorydescription">$forum[description]</span></div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: <h3>$forum[subforums]</h3></div></if>


forumhome_forumbit_level1_post:


<h1><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></h1>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: <h3>$forum[subforums]</h3></div></if>


forumhome_forumbit_level2_nopost:


<h2><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a></h2>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: <h3>$forum[subforums]</h3></div></if>


forumhome_forumbit_level2_post:


<h2><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></h2>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: <h3>$forum[subforums]</h3></div></if>


threadbit:


<h4><div>
<if condition="$show['taglist'] OR $show['moderated'] OR $show['deletedthread'] OR $show['paperclip'] OR $show['subscribed'] OR $show['sticky'] OR $show['rexpires']">
<span style="float:$stylevar[right]">
<if condition="$show['taglist']"> <img class="inlineimg" src="$stylevar[imgdir_misc]/tag.png" alt="$thread[taglist]" /> </if>
<if condition="$show['rexpires']"> <img class="inlineimg" src="$stylevar[imgdir_misc]/expires.gif" alt="<phrase 1="$thread[expiredate]" 2="$thread[expiretime]">$vbphrase[expires_on_x_y]</phrase>" /> </if>
<if condition="$show['moderated']"> <img class="inlineimg" src="$stylevar[imgdir_misc]/moderated_small.gif" alt="<phrase 1="$thread[hiddencount]">$vbphrase[x_moderated_posts]</phrase>" /> </if>
<if condition="$show['deletedthread']"> <img class="inlineimg" src="$stylevar[imgdir_misc]/trashcan_small.gif" alt="<phrase 1="$thread[deletedcount]">$vbphrase[x_deleted_posts]</phrase>" /> </if>
<if condition="$show['paperclip']"> <a href="#" onclick="attachments($thread[threadid]); return false"> <img class="inlineimg" src="$stylevar[imgdir_misc]/paperclip.gif" border="0" alt="<phrase 1="$thread[attach]">$vbphrase[x_attachments]</phrase>" /></a> </if>
<if condition="$show['subscribed']"> <img class="inlineimg" src="$stylevar[imgdir_misc]/subscribed.gif" alt="$vbphrase[you_are_subscribed_to_this_thread]" /> </if>
<if condition="$show['sticky']"> <img class="inlineimg" src="$stylevar[imgdir_misc]/sticky.gif" alt="$vbphrase[sticky_thread]" /> </if>
</span>
</if>
<if condition="$show['gotonewpost']"><a href="showthread.php?$session[sessionurl]goto=newpost&amp;t=$thread[threadid]$thread[highlight]" id="thread_gotonew_$thread[realthreadid]"><img class="inlineimg" src="$stylevar[imgdir_button]/firstnew.gif" alt="$vbphrase[go_to_first_new_post]" border="0" /></a></if>
$thread[movedprefix]
$thread[typeprefix]
$thread[moderatedprefix]
$thread[prefix_rich]
<a href="showthread.php?$session[sessionurl]t=$thread[threadid]$thread[highlight]" id="thread_title_$thread[realthreadid]"<if condition="$show['gotonewpost']"> style="font-weight:bold"</if>>$thread[threadtitle]</a>
<if condition="$thread['pagenav']">$stylevar[dirmark]<span class="smallfont" style="white-space:nowrap">(<img class="inlineimg" src="$stylevar[imgdir_misc]/multipage.gif" alt="$vbphrase[multipage_thread]" border="0" /> $thread[pagenav]<if condition="$show[pagenavmore]"> ... <a href="showthread.php?$session[sessionurl]t=$thread[threadid]&amp;page=$thread[totalpages]$thread[highlight]">$vbphrase[last_page]</a></if>)</span></if>
</div></h4>


(necessary edits in bold, duh)


Additional CSS Definitions:


h1 {
margin: 0px; !important;
padding: 0px; !important;
font-size: 1em; !important;
display: inline !important;
font-weight: normal;
}

h2 {
margin: 0px; !important;
padding: 0px; !important;
font-size: 1em; !important;
display: inline !important;
font-weight: normal;
}

h3 {
margin: 0px; !important;
padding: 0px; !important;
font-size: 1em; !important;
display: inline !important;
font-weight: normal;
}

h4 {
margin: 0px; !important;
padding: 0px; !important;
font-size: 1em; !important;
display: inline !important;
font-weight: normal;
}

Shouldn't compromise any style's css, unless they're weird.

I also think BBCode tags are left untouched as well as they actually have their own styling rules.

edit: I've been researching screen readers and how they interact with web pages and I think I've underestimated the changes that would need to be made, and also misunderstood how headers work.

There's a lot more to do yet, but I'm totally up for it.

I'll try my best to implement it into the master style, but it might have to become a style of it's own if I have too much trouble.

Expect a PMs oon though, pokemonmasteraaron! I'll be getting you to be my guinea pig!